GreenSock Animation Platform - 动画引擎平台


免费
跨平台
JavaScript

软件简介

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