逐帧动画在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;}
}