传智博客
快捷导航
蚂蚁部落
蚂蚁部落 网站首页 实例代码 CSS3实例 查看内容

css3 animation实现逐帧动画

2017-4-9 10:41| 发布者: antzone| 查看: 429| 评论: 0|来自: 蚂蚁部落

关于animation属性的基本用法可以参阅CSS3 animation一章节。

animation属性一览:

因为animation属性比较多,下面一张图可以使大家有一目了然的效果:

a:3:{s:3:\"pic\";s:43:\"portal/201704/09/104300apnp1yroyom09yo1.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

使用animation实现逐帧动画:

熟悉了animation的属性之后,得找个简单的小项目实现下。

思路很简单,就是给元素一个雪碧图的背景,然后添加的帧动画更改background-position,关键代码:

[CSS] 纯文本查看 复制代码
@keyframes run{
  from{
    background-position: 0 0;
  }
  to{
    background-position: -1540px 0 ;
  }
}
div{
  width:140px;
  height:140px;
  background: url(run.png) ;
  animation-name:run;
  animation-duration:1s;
  animation-iteration-count:infinite;
}

a:3:{s:3:\"pic\";s:43:\"portal/201704/09/104351retld42f4tibbddz.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

但是跑起来后我们发现,每帧动画之间帧动画都是滑动,并不是我们要的效果,为什么呢?

原来animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果是连贯性的

知道原因就好办了,解决思路就是:

[CSS] 纯文本查看 复制代码
@keyframes run{
  0%, 8%{  /*动作一*/  }
  9.2%, 17.2%{  /*动作二*/  }
    ...
}

step1:动作之间停留8帧,0%设置动作一,动作一结束在8%

step2:动作之间过渡1.2帧,9.2%设置动作二,动作二结束在17.2%

完整代码:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
@keyframes run{
  0%, 8%{  background-position: 0 0;  }
  9.2%, 17.2%{  background-position: -140px 0;  }
  18.4%, 26.4%{  background-position: -280px 0 ;  }
  27.6%, 35.6%{  background-position: -420px 0 ;  }
  36.8%, 44.8%{  background-position: -560px 0 ;  }
  46%, 54%{  background-position: -700px 0 ;  }
  55.2%, 63.2%{  background-position: -840px 0 ;  }
  64.4%, 72.4%{  background-position: -980px 0 ;  }
  73.6%, 81.6%{  background-position: -1120px 0 ;  }
  82.8%, 90.8%{  background-position: -1400px 0 ;  }
  92%, 100%{  background-position: -1540px 0 ;  }
}
@-webkit-keyframes run{
  0%, 8%{  background-position: 0 0;  }
  9.2%, 17.2%{  background-position: -140px 0;  }
  18.4%, 26.4%{  background-position: -280px 0 ;  }
  27.6%, 35.6%{  background-position: -420px 0 ;  }
  36.8%, 44.8%{  background-position: -560px 0 ;  }
  46%, 54%{  background-position: -700px 0 ;  }
  55.2%, 63.2%{  background-position: -840px 0 ;  }
  64.4%, 72.4%{  background-position: -980px 0 ;  }
  73.6%, 81.6%{  background-position: -1120px 0 ;  }
  82.8%, 90.8%{  background-position: -1400px 0 ;  }
  92%, 100%{  background-position: -1540px 0 ;  }
}
div{
  width:140px;
  height:140px;
  background: url(demo/CSS/img/run.png) ;
  animation:run 1s infinite;
  -webkit-animation:run 1s infinite;
  animation-fill-mode : backwards;
  -webkit-animation-fill-mode : backwards;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

还有另外一个实现方法,就是利用steps(),就是帧之间的阶跃动画,这个在w3c里面没有写,先贴个图:

a:3:{s:3:\"pic\";s:43:\"portal/201704/09/104509bugqz2zjlgsj1wqz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

由上图可知:

steps(1,start):动画一开始就跳到 100% 直到这一帧(不是整个周期)结束。

steps(1,end):保持 0% 的样式直到这一帧(不是整个周期)结束。

另外也可以直接设置 animation-timing-function:step-start/step-end。

step-start效果等同于steps(1,start),step-end效果等同于steps(1,end)。

最终效果,因为录制的问题可能有点卡顿,有兴趣的同学可以直接复制代码去跑下:

a:3:{s:3:\"pic\";s:43:\"portal/201704/09/104555ln3oe3exep33nzre.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

完整代码:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
@keyframes run{
  0%{
    background-position: 0 0;
  }
  8.333%{
    background-position: -140px 0;
  }
  16.666%{
    background-position: -280px 0 ;
  }
  25.0%{
    background-position: -420px 0 ;
  }
  33.333%{
    background-position: -560px 0 ;
  }
  41.666%{
    background-position: -700px 0 ;
  }
  50.0%{
    background-position: -840px 0 ;
  }
  58.333%{
    background-position: -980px 0 ;
  }
  66.666%{
    background-position: -1120px 0 ;
  }
  75.0%{
    background-position: -1260px 0 ;
  }
  83.333%{
    background-position: -1400px 0 ;
  }
  91.666%{
    background-position: -1540px 0 ;
  }
  100%{
    background-position: 0 0 ;
  }
}
@-webkit-keyframes run{
  0%{
    background-position: 0 0;
  }
  8.333%{
    background-position: -140px 0;
  }
  16.666%{
    background-position: -280px 0 ;
  }
  25.0%{
    background-position: -420px 0 ;
  }
  33.333%{
    background-position: -560px 0 ;
  }
  41.666%{
    background-position: -700px 0 ;
  }
  50.0%{
    background-position: -840px 0 ;
  }
  58.333%{
    background-position: -980px 0 ;
  }
  66.666%{
    background-position: -1120px 0 ;
  }
  75.0%{
    background-position: -1260px 0 ;
  }
  83.333%{
    background-position: -1400px 0 ;
  }
  91.666%{
    background-position: -1540px 0 ;
  }
  100%{
    background-position: 0 0 ;
  }
}
div{
  width:140px;
  height:140px;
  background: url(demo/CSS/img/run.png) ;
  animation:run 1s steps(1, start) infinite;
  -webkit-animation:run 1s steps(1, start) infinite;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-11-19 20:22 , Processed in 0.090023 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部