Adobe Edge Animate –彈性的方塊-使用tweenmax緩動效果

Adobe Edge Animate –彈性的方塊-使用tweenmax緩動效果

版權聲明:

本文版權屬於 北京聯友天下科技發展有限公司。

轉載的時候請注明版權和原文地址。

此前有Edge愛好者提出一個疑問：在Edge中有動畫的緩動效果，但是如何使用tweenmax來實現這個緩動呢？這是個比較有意思的問題，帶着這個疑問查找了網上的一些資料后，做出了一個demo，在此跟各位分享。

一、下載tweenmax相關js

從網上下載greensock的tweenmax相關js文件，放置在工程文件目錄下，如下圖：

 

 

二、制作動畫元素：方塊（矩形）

在Edge中使用矩形工具，制作一個Rectangle，可以另外命名，在此就使用默認的名稱Rectangle，如下圖：

 

三、添加tweenmax功能函數

1、在舞台Stage的屬性面板上，點擊add actions，添加compositionReady函數

 

 

2、將greensock相關js文件導入，並且與自定義函數init()關聯：當加載完畢時，執行init()函數

yepnope(

{

nope:[

                   'greensock/TweenMax.min.js',

                   'greensock/easing/EasePack.min.js',

                   'greensock/plugins/CSSPlugin.min.js',

                   'greensock/plugins/ColorPropsPlugin.min.js'

],

complete: init

}

);

3、自定義函數init()的添加，完成自定義的tweenmax效果，在這里各位可自由發揮，制作自定義的動畫緩動效果，在這里實現的是鼠標進入的時候有緩動，而鼠標退出的時候有一定程度的恢復效果。

首先定義一個變量，並且為這個變量賦值為舞台中的矩形Rectangle元素；然后將該變量與鼠標事件綁定，執行相關的tweenmax功能。

function init(){

         var Rectangle = sym.$("Rectangle");

         Rectangle.bind("mouseover",function(){

                   TweenMax.to(Rectangle,1,{left:"+=100px",opacity:0.5,ease:Bounce.easeOut});

                   TweenMax.to(Rectangle,1,{backgroundColor:"#666666",ease:Bounce.easeOut});

         });

 

         Rectangle.bind("mouseout",function(){

                   TweenMax.to(Rectangle,1,{left:"-=50px",opacity:1.0,ease:Bounce.easeIn});

                   TweenMax.to(Rectangle,1,{backgroundColor:"#2fabec",ease:Bounce.easeIn});

         });

}

原文地址：http://www.cnblogs.com/adobeedge/p/Adobe_Edge_Tweenmax.html