上一篇
下一篇
6句代码实现六宫格重力作用出场动画-GSAP_TweenMax_3D_transform
作者:admin 日期:2014-12-30
昨天群友发出一个网站中有一个导航条出场效果，挺有味道。于是花了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代码
- <script src="js/jquery.min.js"></script>
- <script src="js/TweenMax.min.js"></script>
- <script>
- TweenMax.fromTo($(".a2"), .3, {scale:.5,alpha:0}, {scale:1,alpha:1});
- TweenMax.fromTo($(".a1"), 2, {rotationY:-90}, {rotationY:0,transformOrigin:"right center",transformPerspective:500,ease:Elastic.easeOut,delay:0.3});
- TweenMax.fromTo($(".a3"), 2, {rotationY:90}, {rotationY:0,transformOrigin:"left center",transformPerspective:500,ease:Elastic.easeOut,delay:0.3});
- TweenMax.fromTo($(".a4"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:0.9});
- TweenMax.fromTo($(".a5"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:1.1});
- TweenMax.fromTo($(".a6"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:1.2});
- </script>
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 0 | 引用: 0 | 查看次数: 6237
发表评论
