上一篇
下一篇
HTML中实现逐帧动画的思路-用tweenMax
作者:admin 日期:2015-06-19
逐帧动画在FLASH中是很好实现的。但在HTML世界中，并没有一个很正统的方法。前两天看scrollmagic的示例文件，意外发现他用tweenMax实现的一个逐帧动画，把代码提炼出来做了以下这个DEMO：
http://blog.258754.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;}
- }
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 0 | 引用: 0 | 查看次数: 8269
发表评论
