GreenSock推出了新一代动画引擎平台GreenSock Animatio...

原创
2012/05/16 09:06
阅读数 2.8K

Flash业界久负盛名的动画引擎(TweenLite等)GreenSock推出了新一代动画引擎平台GreenSock Animation Platform,最棒的是包括JS版本!速速围观:http://t.cn/zOncGme , 入门教程http://t.cn/zOnSyWr ,压力测试案例:http://t.cn/zOnSyWB 

GreenSock Animation Platform V12


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

试用了一下(傲游3.0),TweenLite一开始还挺快的,测试后CPU100%就没下来过。(看了一下任务管理器,不是傲游在占用,见GUI了)-_-!! 

我用IETester V0.4.11测试(IE6~9)都报错。
用IE9和IE7兼容模式可以。

大家都去测试一下,看性能怎么样。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部