GreenSock Animation Platform动画引擎平台
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