GSAP JS基础教程--动画的控制及事件
好多天没有写无博文啦,今天无聊就再写一下!
今天要讲的是TweenLite的一些事件以及,TweenLite动画的控制,TweenMax类似,请自行参考官方文档:http://api.greensock.com/js/
先说一下TweenLite的常见事件:
onStart 动画开始时的一瞬间触发 onUpdate 动画进行时循环触发(可以理解为一个循环,当动画未结束之前都不会停止) onComplete 动画结束的一瞬间触发 onReverseComplete 反转动画结束时的一瞬间触发
相应的有
onStartParams 是一个数组,存放onStart事件的参数 onUpdateParams 是一个数组,存放onUpdate事件的参数 onCompleteParams 是一个数组,存放onComplete事件的参数 onReverseCompleteParams 是一个数组,存放onReverseComplete事件的参数
具体用法如下:
TweenLite.to("#rect",2,{left:"900px",top:"400px",ease:Back.easeOut,onComplete:onTCP,onCompleteParams:["结束啦!"]});
function onTCP(pm){
alert(pm);
}
TweenLite的控制: play 开始 restart 重新开始 pause 暂停 resume 继续 reverse 反转
今天说的内容挺简单的,直接看代码就行啦!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>GSAP JS基础教程--动画的控制及事件</title>
<meta name="Generator" content="EditPlus">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!--
*@author AIJ
*@email 1058514799@qq.com
*@date 2013-6-28
--> <style type="text/css">
#rect{
position:absolute;
width:50px;
height:50px;
background-color:blue;
} h3{
text-align:center;
}
</style> <script type="text/javascript" src="../greensock/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="../greensock/TweenLite.min.js"></script>
<script type="text/javascript" src="../greensock/easing/EasePack.min.js"></script>
</head>
<body>
<!--创建一个“小方块”-->
<div id="rect"></div> <!--创建几个按键和一个显示用的标签-->
<input type="button" value="重新开始" onclick="go(1);" />
<input type="button" value="暂停" onclick="go(2);" />
<input type="button" value="继续" onclick="go(3);" />
<input type="button" value="反转" onclick="go(4);" />
<h3 id="label"></h3> <script type="text/javascript">
var tw=TweenLite.to("#rect",2,{
left:"900px",
top:"400px",
ease:Back.easeOut,
onStart:TE,onStartParams:["动画开始........"],
onUpdate:TE,onUpdateParams:["动画进行ing........"],
onComplete:TE,onCompleteParams:["动画结束啦........"],
onReverseComplete:TE,onReverseCompleteParams:["已经回到原点!"]
}); function TE(pm){
document.getElementById("label").innerHTML=pm;
} function go(opt){
switch(opt){
case 1:tw.restart();break;
case 2:tw.pause();break;
case 3:tw.resume();break;
case 4:tw.reverse();break;
}
}
</script>
</body>
</html>
GSAP JS基础教程--动画的控制及事件的更多相关文章
- GSAP JS基础教程--TweenLite操作元素的相关属性
今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了. 代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...
- GSAP JS基础教程--使用缓动函数
今天来了解一下缓动easeing函数. 开始,如果你还没有GSAP的类包,可以到GreenSock的官网去下载最新版本的类包,或者直接点击这里来下载 学习之前,先来准备一下: <!DO ...
- GSAP JS基础教程--认识GSAP JS
第一次写博文呢,这次写博客是因为应一位同学的要求,写一下GSAP JS的一个小教程.为什么说小呢?因为它实际上就是小,只是一个入门级的小教程.如果你想问:“那你为什么不写详细一点呢?”,我想说,说., ...
- js基础教程四之无缝滚动
前面学习了相关js的一些基础知识,这节主要针对定时器作综合运用: 无缝滚动-基础 效果演示: *物体运动基础 *让div移动起来 *offsetLeft的作用 *用定时器让物体连续移动 <sty ...
- js基础之动画(三)
一.链式运动 首先,要改进运动框架 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; ...
- Java基础教程(9)--流程控制
一.分支结构 1.if语句 if语句会与其后的第一条语句或代码块结合,且只有当判断条件为true时才执行语句或代码块.例如,自行车只有在运动的时候才可以减速,就像下面这样: void applyB ...
- Linux 基础教程 39-作业控制
在Linux系统中,作业是由一个或多个关联进程组成的.用户可以运行多个作业并可以在作业间切换.而作业控制则是对作业的行为进行控制,允许用户对作业的前后台的进行切换和终止操作等.作业相关的控制命 ...
- js基础之动画(二)
一.多物体同时运动 栗子一:多个Div,鼠标移入变高,动态下拉菜单 function startMove(obj,iTarget){ clearInterval(obj.timer); obj.ti ...
- js基础之动画(一)
一.让div动起来 var oBtn = document.getElementById('btn1'); var timer='';//设置定时器 oBtn.onclick=function st ...
随机推荐
- beansbinding NetBeans IDE 中 Swing数据绑定插件
http://my.oschina.net/u/127459/blog/111486 https://kenai.com/projects/betterbeansbinding/pages/Home ...
- 微信中关闭网页输入内容时的安全提示 [干掉 “防盗号或诈骗,请不要输入QQ密码”]
未设置之前: 需要把域名加入白名单 设置方法:微信公共平台后台-->公众号设置--->功能设置--->填写业务域名即可.
- Windows 7 incorrectly reports "No Internet Access"
PROBLEM DESCRIPTION Windows 7 may sometimes report that it has "No Internet Access"; this ...
- github开源库(一)
http://www.open-open.com/lib/view/open1388317199516.html 1.ActionBarSherlock ActionBarSherlock应该算得上是 ...
- Deep Residual Learning for Image Recognition这篇文章
作者:何凯明等,来自微软亚洲研究院: 这篇文章为CVPR的最佳论文奖:(conference on computer vision and pattern recognition) 在神经网络中,常遇 ...
- 分享10款效果惊艳的HTML5图片特效
在HTML5的世界里,图片特效都十分绚丽,我们在网站上也分享过很多不错的HTML5图片特效,现在我们精选10款效果惊艳的HTML5图片特效分享给大家. 1.HTML5 3D正方体旋转动画 很酷的3D特 ...
- thinkphp中的AJAX返回ajaxReturn()
系统支持任何的AJAX类库,Action类提供了ajaxReturn方法用于AJAX调用后返回数据给客户端.并且支持JSON.XML和EVAL三种方式给客户端接受数据,通过配置DEFAULT_AJAX ...
- linux 下启动tomca慢问题
编辑文件vim /etc/profile 后面加入一句:export JAVA_OPTS="-Djava.security.egd=file:/dev/./urandom" 设置立 ...
- zhuzher日志log
val log=sc.textFile("/data/logstash/data/*.log") val rowRDD2=log2.map(line=>(line.split ...
- 基于PHP采集数据入库程序(二)
在上篇基于PHP采集数据入库程序(一) 中提到采集新闻信息页的列表数据,接下来讲讲关于采集新闻具体内容 这是上篇博客的最终数据表截图: 接下来要做的操作就是从数据库中读取所需要采集的URL,进行页面抓 ...