html帧动画效果,HTML中实现逐帧动画的思路-用tweenMax

逐帧动画在FLASH中是很好实现的。但在HTML世界中，并没有一个很正统的方法。前两天看scrollmagic的示例文件，意外发现他用tweenMax实现的一个逐帧动画，把代码提炼出来做了以下这个DEMO：

http://contactu.cn/2015/test_frame/

知道了这个思路，那么就可以用其它的方法，比如setinterval等函数来实现了。

用timelineMax之类的强大工具，更可以实现各种播放控制，比如正反放、快进等。还可以用来做那种“拖动控制轴来转动物体”等控制动画。

---总之，只要能实现“时间线与图像”的结合，接下来如何控制时间线，就是tween类框架的强项了。

谢谢谢佳浩同学用css的方式实现了这个效果，使逐帧的方式更加丰富，主要代码如下。

点评：js优势是可以自由控制时间线，比如各种播放控制、事件响应等。css方式优点是渲染快，简便，css定义方便。

XML/HTML代码

.box{ width: 286px; height:222px; margin: 100px auto 0 ; animation: demo 1s infinite;}

@keyframes demo{

0%{ background: url(img/1.png) center center no-repeat;}

20%{ background: url(img/2.png) center center no-repeat;}

40%{ background: url(img/3.png) center center no-repeat;}

60%{ background: url(img/4.png) center center no-repeat;}

80%{ background: url(img/5.png) center center no-repeat;}

100%{ background: url(img/6.png) center center no-repeat;}

}