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