Adobe Edge Animate –弹性的方块
来源:互联网 发布:鞍山市网络作家协会 编辑:程序博客网 时间:2024/05/20 02:27
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
<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- Adobe Edge Animate –弹性的方块
- Adobe Edge Animate
- adobe edge animate 和 adobe animate cc 有啥区别?
- html5动画制作工具Adobe Edge Animate
- Adobe Edge Animate –修改Edge Commons Spotlight功能,使之能支持播放中国网站视频
- Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现
- Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现
- Adobe Edge Animate应用(1)-软件安装
- Adobe Edge Animate应用(2)-绘制图形并应用动态效果
- Adobe Edge Animate --异步条件加载框架(yepnop):加载bootstrap之按钮、进度条、菜单效果
- 边缘方块 EDGE 打到关底了
- 欢迎Adobe Animate CC 2015, Flash Professional的新时代!
- Adobe Acrobat reader 鼠标指针变成黑色方块的解决方案
- Adobe Edge 初体验
- css3弹性方块布局:Flex
- adobe animate cc 2017 更改sdk版本
- 【简报】超棒的免费Web字体服务:Adobe Edge Web字体
- 参加 Adobe Edge 产品介绍会
- KVM
- HEVC/H265 HM10.0 分析(二)TComDataCU.cpp .
- 还是很水啊!!!
- HEVC/H265 HM10.0 分析(三)TAppDecTop.cpp .
- MSP430F2618写TLV5638
- Adobe Edge Animate –弹性的方块
- I2C总线被占用
- 程序设计竞赛网站集锦
- BUAA-SCSE Training day3 5 6 7
- implement of sqrt without using stdlib
- 23个漂亮的jQuery文字动画效果教程示例
- JSTL 表达式与 EL 语言
- MingQQ v1.0高仿版开源了,使用WebQQ协议实现了QQ客户端基本的聊天功能...
- [C][socket]:setsockopt + raw_socket