greenSock 订阅所有【greenSock】的日志

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

作者:admin 日期:2013-07-08
字体大小: 小 中 大

 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 | 查看次数: 7022
发表评论
昵　称:
密　码: 游客发言不需要密码.
邮　箱: 支持Gravatar头像.
网　址: 输入网址便于回访.
内　容:
验证码:
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭