6句代码实现六宫格重力作用出场动画-GSAP_TweenMax_3D_transform

 昨天群友发出一个网站中有一个导航条出场效果,挺有味道。于是花了2小时模仿成功,我作品在此:

http://258754.com/m/zgl/TweenMax_3D_transform.HTML

 

原站在此:http://cswzs.csjinmaohui.com///?nsukey=r1DXSmigepQZpFjQItTf9pGeJpxXjmi5G9oWsiOr85FYnOU5yWXU4Idy48Cy79MIFo934MArZBDCRHDMCXezpA%3D%3D

GSAP范例在此:http://greensock.com/css3/

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

不查不知道,原来GSAP有如此强大的CSS动画功能,尤其是对于仿3D变换的支持。只是GS官网上的文章虽多,但源码较少,辗转stackoverflow.com找到一些相应的源码。

我个人比较喜欢GSAP来替代CSS动画,GS官网上说是GSAP的时间轴TWEEN类动画,无论是从代码效率还是代码简练度上,都远超CSS动画。至少后者是属实的。这6句代码,如果有用CSS写,会写上一大版。

Javascript代码
  1. <script src="js/jquery.min.js"></script>  
  2. <script src="js/TweenMax.min.js"></script>  
  3.   
  4. <script>  
  5. TweenMax.fromTo($(".a2"), .3, {scale:.5,alpha:0}, {scale:1,alpha:1});  
  6. TweenMax.fromTo($(".a1"), 2, {rotationY:-90}, {rotationY:0,transformOrigin:"right center",transformPerspective:500,ease:Elastic.easeOut,delay:0.3});  
  7. TweenMax.fromTo($(".a3"), 2, {rotationY:90}, {rotationY:0,transformOrigin:"left center",transformPerspective:500,ease:Elastic.easeOut,delay:0.3});  
  8.   
  9. TweenMax.fromTo($(".a4"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:0.9});  
  10. TweenMax.fromTo($(".a5"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:1.1});  
  11. TweenMax.fromTo($(".a6"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:1.2});  
  12. </script>  

 



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