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
Adobe Edge Animate –弹性的方块-使用tweenmax缓动效果的更多相关文章
- Adobe Edge Animate CC 不再开发更新!
Adobe Edge Animate CC停止开发更新! http://blogs.adobe.com/edge/2015/11/30/update-about-edge-tools-services ...
- Adobe Edge Animate –EdgeCommons Log和全局变量设置功能
Adobe Edge Animate –EdgeCommons Log和全局变量设置功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 一.Log功能 当 ...
- Adobe Edge Animate –使用EdgeCommons加载和播放音频
Adobe Edge Animate –使用EdgeCommons加载和播放音频 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在Edge中,可以new一 ...
- Adobe Edge Animate –svg地图交互-精确的边缘及颜色置换
Adobe Edge Animate –svg地图交互-精确的边缘及颜色置换 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 上一篇我们说到了使用jquer ...
- Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片
Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在edge ...
- Adobe Edge Animate –修改Edge Commons Spotlight功能,使之能支持播放中国网站视频
Adobe Edge Animate –修改Edge Commons Spotlight功能,使之能支持播放中国网站视频 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权 ...
- Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现
Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在网络上浏览有关Edge相关问题的时 ...
- Adobe Edge Animate –使用css制作菜单
Adobe Edge Animate –使用css制作菜单 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 效果图:
- Adobe Edge Animate –Edge Commons强势来袭,Edge团队开发成为现实
Adobe Edge Animate –Edge Commons强势来袭,Edge团队开发成为现实 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. Edge ...
随机推荐
- 用java获取歌曲文件的专辑封面元信息
几个个软件: 1, Jaudioatgger: 链接 2, mp3agic 链接 3, Java mp3 id3 tag library (推荐用上面两个) 其它: android-midi-lib
- poj 1517 u Calculate e
u Calculate e Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 19465 Accepted: 11362 ...
- mybatis杂记
mybatis学习官网: 1.如果项目中使用maven管理,又引用 了mybatis框架, 下面是mybatis官网给出的 mybatis在maven中央仓库的坐标原文 详情见连接:https://c ...
- Centos7安装Docker Engine
一.先决条件 首选需要一个64位操作系统和3.10或者更版本的内核. 查看当前内核版本: $ uname -r -.el7.x86_64 二.yum安装Docker Engine 安装Docker E ...
- hibernate AOP
摘自:http://pandonix.iteye.com/blog/336873/ 此前对于AOP的使用仅限于声明式事务,除此之外在实际开发中也没有遇到过与之相关的问题.最近项目中遇到了以下几点需求, ...
- PROCESS_YIELD()宏和C语言的switch语句< contiki学习笔记之七>
写在前面: 按照main()函数的代码一行一行的分析,该是看到了 etimer_process 这个位置.但是etimer_process实现里的一个宏 PROCESS_YIELD()引出了很多故事 ...
- PostgreSQL的 initdb 源代码分析之二十五
继续分析: make_postgres(); 展开: 目的是创建postgres数据库. cmd是:/home/pgsql/project/bin/postgres" --single -F ...
- OSG中的示例程序简介(转)
OSG中的示例程序简介 1.example_osganimate一)演示了路径动画的使用 (AnimationPath.AnimationPathCallback),路径动画回调可以作用在Camera ...
- Mouse_event 鼠标点击
//这样就是左键单击 mouse_event( MOUSEEVENTF_LEFTDOWN, 0, 0, 0, 0 );// 按下mouse_event( MOUSEEVENTF_LEFTUP, 0, ...
- iOS开发——网络编程Swift篇&(二)同/异&步请求
同/异&步请求 同步: // MARK: - 同步请求 func httpSynchronousRequest() { //创建NSURL对象 var url:NSURL! = NSURL(s ...