如何为所有精灵图像设置动画?

Posted

技术标签:

【中文标题】如何为所有精灵图像设置动画?【英文标题】:How to animate all sprite images? 【发布时间】:2017-09-05 02:38:34 【问题描述】:

当您选择的图像精灵不包含一行图像时,如何为所有图像精灵设置动画?

**这里的这个例子有一个单行图像**

链接:Reference

.hi 
    width: 50px;
    height: 72px;
    background-image: url("http://s.cdpn.io/79/sprite-steps.png");
    
    -webkit-animation: play .8s steps(10) infinite;
       -moz-animation: play .8s steps(10) infinite;
        -ms-animation: play .8s steps(10) infinite;
         -o-animation: play .8s steps(10) infinite;
            animation: play .8s steps(10) infinite;


@-webkit-keyframes play 
   from  background-position:    0px; 
     to  background-position: -500px; 


@-moz-keyframes play 
   from  background-position:    0px; 
     to  background-position: -500px; 


@-ms-keyframes play 
   from  background-position:    0px; 
     to  background-position: -500px; 


@-o-keyframes play 
   from  background-position:    0px; 
     to  background-position: -500px; 


@keyframes play 
   from  background-position:    0px; 
     to  background-position: -500px; 
<img src="http://s.cdpn.io/79/sprite-steps.png" />
<div class="hi"></div>

现在这个例子包含不是一行的精灵图像。但包含 3 行精灵图像。你如何像上面的代码 sn-p 的链接那样制作动画?我是否使用 jquery/javascript 来显示它?请帮忙。

img display: block;margin: auto;

.sample 
    margin: 0 auto;
    width: 75px;
    height: 100px;
    background-image: url("https://fermmm.files.wordpress.com/2011/02/preview.jpg");
            animation: play 1s steps(4) infinite;

@keyframes play 
   from  background-position:    0px; 
     to  background-position: -299px; 
<img src="https://fermmm.files.wordpress.com/2011/02/preview.jpg" />

<div style="text-align:center;">Sprite image</div>
<div class="sample"></div>

【问题讨论】:

【参考方案1】:

创建了两个单独的关键帧动画,以水平遍历 4 帧和垂直遍历 3 帧。播放一个方向动画时,必须冻结另一个方向。

由于1s被设置为经过4个水平帧,所以下一个垂直帧将在1s之后开始,因此垂直方向的持续时间等于1s x 3个垂直帧。

img 
  display: block;
  margin: auto;


.sample 
  margin: 0 auto;
  width: 75px;
  height: 100px;
  background-image: url("https://fermmm.files.wordpress.com/2011/02/preview.jpg");
  animation: playh 1s steps(4) infinite, playv 3s steps(3) infinite;


@keyframes playv 
  0%  background-position-y: 0px; 
  100%  background-position-y: -301px; 


@keyframes playh 
  0%  background-position-x: 0px; 
  100%  background-position-x: -299px; 
<img src="https://fermmm.files.wordpress.com/2011/02/preview.jpg" />

<div style="text-align:center;">Sprite image</div>
<div class="sample"></div>

【讨论】:

以上是关于如何为所有精灵图像设置动画?的主要内容,如果未能解决你的问题,请参考以下文章

如何为背景图像的更改设置动画?

更改设备方向时如何为uiimageview设置动画

如何为 MKAnnotationView 放置动画?

如何为 JQuery addClass/removeClass 函数设置动画?

如何为png图像制作动画

如何为 SwiftUI 列表中的各个行设置动画?