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