GreenSock Animation Platform动画引擎平台

联合创作 · 2023-09-30 11:46

Flash业界久负盛名的动画引擎(TweenLite等)GreenSock推出了新一代动画引擎平台GreenSock Animation Platform,最棒的是包括JS版本!



 



 


 //JS版本


 <script type="text/javascript" src="js/TweenMax.min.js"></script>


 var photo = document.getElementById("photo"); //or use jQuery's $("#photo")


 TweenLite.to(photo, 1.5, {width:100});


 


 //fade out all of the elements with the class "myClass" 


 TweenLite.to( $(".myClass"), 1, {css:{opacity:0}});   


 


 //tween the width of the element with id "myElement" to 500px 


 TweenLite.to( $("#myElement"), 1, {css:{width:"500px"}, ease:Elastic.easeOut});   


 


 //tween the "marginTop" of all objects of the class "myClass" in a staggered fashion so that they appear to fall into place from 100px up 


 var tl = new TimelineLite(); 


 tl.staggerFrom( $(".myClass"), 1, {css:{marginTop:"-=100px", opacity:0}}, 0.1);   


 //or use jQuery's each() method to loop through the results and stagger a fade out 


 $(".myClass").each( function(index, element) {     


     TweenLite.to( element, 1, {css:{autoAlpha:0}, delay:index * 0.2}); 


 });   


 //add a click handler that uses $(this) to refer to the menu element that was clicked and tween its height to 100px 


 $("#menu").click(function(){ 


     TweenLite.to( $(this), 0.7, { css:{height:"100px"}, ease:Power2.easeInOut } );


 });


 


 //AS3.0版本:


 //notice the target is an array 


 TweenLite.to([mc1, mc2, mc3], 1, {alpha:0});   


 var tl:TimelineLite = new TimelineLite(); //previously only appendMultiple() could handle arrays. Now append() and insert() can too. 


 tl.append( [tween1, tween2, tween3] ); 


 tl.insert( [tween1, tween2, tween3] );   //kill all tweens of mc1, mc2, and/or mc3 

浏览 25
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报