起步学习JS动画,从一个小例子,来自于greensock出品的JS动画平台

 GSAP-JS是完全由GSAP平台的AS版本进化出来的,针对HTML平台的JS动画。根据我目前的学习进度,感觉到它已经把很多常用的动画结构,用简练的语法进行了包含。这方面,比使用原生JS或是JQ,有更大的优势。

这里有一个由原站下载的范例包,可以供大家起步学习,我就举一个小例子:

 

我们要做这样一个由N个小图标从上方飘下的动画,HTML结构是这样的:

XML/HTML代码
  1. <div id="logosWrapper">  
  2.       <div class="logo"></div>  
  3.       <div class="logo"></div>  
  4.       <div class="logo"></div>  
  5.       <div class="logo"></div>  
  6.       <div class="logo"></div>  
  7.       <div class="logo"></div>  
  8.       <div class="logo"></div>  
  9.       <div class="logo"></div>  
  10.       <div class="logo"></div>  
  11.       <div class="logo"></div>  
  12. </div>  

 

用 GSAP-JS实现,实际上只有2句代码:

XML/HTML代码
  1. logos = $(".logo"),     //jq定义,将图标们定义为一个组  
  2. .staggerFrom(logos, 0.6, {css:{top:-60, left:"-=50px", rotation:"-90deg"}, ease:Back.easeOut}, 0.1)     //按0.1秒的时间间隔,将logos中所有子元素,从左上方旋转-90度飞入,飞行时长为0.6秒  

非常高效吧,不用自己写循环!不用写定时器!不用去做CSS的具体定义!

完整代码见我附件包中的:16_timelinelite_labels.html这个例子

 

 



[本日志由 admin 于 2013-07-08 09:54 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: GSAP-JS
相关日志:
评论: 0 | 引用: 0 | 查看次数: 3284
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 支持Gravatar头像.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭