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

 //JS版本

 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 

您可能感兴趣的文章: