预览模式: 普通 | 列表

HTML中实现逐帧动画的思路-用tweenMax

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

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

 

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

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

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


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

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

XML/HTML代码
  1. .box{ width: 286px; height:222px; margin: 100px auto 0 ; animation: demo 1s infinite;}  
  2. @keyframes demo{  
  3.     0%{ background: url(img/1.png) center center no-repeat;}  
  4.     20%{ background: url(img/2.png) center center no-repeat;}  
  5.     40%{ background: url(img/3.png) center center no-repeat;}  
  6.     60%{ background: url(img/4.png) center center no-repeat;}  
  7.     80%{ background: url(img/5.png) center center no-repeat;}  
  8.     100%{ background: url(img/6.png) center center no-repeat;}  
  9. }  

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2595

原来要在手机上测试刚做好的页面,都是丢到服务器上去,然后用网址访问。改一次就要传一次,效率低下。

 今天跟牛人学了一小手,直接把本地电脑定义为服务器,使用node.js。总之结果就是,操作很傻瓜(几分钟搞定),要访问的网页想定在哪个目录都可以。具体操作方法见下文:http://www.cnblogs.com/wangfupeng1988/p/4143996.html

Node.js下载地址:https://nodejs.org/#download

-------------------------------------------

然后手机接入局域网wifi,用浏览器,用IP地址访问电脑IP地址即可,比如:http://172.16.6.218:8081/demo.html

分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1273