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

posted @ 2013-07-10 15:33 Adobe Edge 阅读(...) 评论(...) 编辑 收藏