好多天没有写无博文啦,今天无聊就再写一下!

今天要讲的是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基础教程--动画的控制及事件的更多相关文章

  1. GSAP JS基础教程--TweenLite操作元素的相关属性

    今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了.   代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...

  2. GSAP JS基础教程--使用缓动函数

    今天来了解一下缓动easeing函数. 开始,如果你还没有GSAP的类包,可以到GreenSock的官网去下载最新版本的类包,或者直接点击这里​来下载 学习之前,先来准备一下:     <!DO ...

  3. GSAP JS基础教程--认识GSAP JS

    第一次写博文呢,这次写博客是因为应一位同学的要求,写一下GSAP JS的一个小教程.为什么说小呢?因为它实际上就是小,只是一个入门级的小教程.如果你想问:“那你为什么不写详细一点呢?”,我想说,说., ...

  4. js基础教程四之无缝滚动

    前面学习了相关js的一些基础知识,这节主要针对定时器作综合运用: 无缝滚动-基础 效果演示: *物体运动基础 *让div移动起来 *offsetLeft的作用 *用定时器让物体连续移动 <sty ...

  5. js基础之动画(三)

    一.链式运动 首先,要改进运动框架 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; ...

  6. Java基础教程(9)--流程控制

    一.分支结构 1.if语句   if语句会与其后的第一条语句或代码块结合,且只有当判断条件为true时才执行语句或代码块.例如,自行车只有在运动的时候才可以减速,就像下面这样: void applyB ...

  7. Linux 基础教程 39-作业控制

        在Linux系统中,作业是由一个或多个关联进程组成的.用户可以运行多个作业并可以在作业间切换.而作业控制则是对作业的行为进行控制,允许用户对作业的前后台的进行切换和终止操作等.作业相关的控制命 ...

  8. js基础之动画(二)

    一.多物体同时运动 栗子一:多个Div,鼠标移入变高,动态下拉菜单 function startMove(obj,iTarget){  clearInterval(obj.timer); obj.ti ...

  9. js基础之动画(一)

    一.让div动起来 var oBtn = document.getElementById('btn1');  var timer='';//设置定时器 oBtn.onclick=function st ...

随机推荐

  1. MFC函数——CWnd::OnEraseBkgnd

    CWnd::OnEraseBkgnd afx_msg BOOL OnEraseBkgnd( CDC* pDC ); 返回值: 如果它擦除了背景,则返回非零值:否则返回0. 参数: pDC 指定了设备环 ...

  2. webpack9--删除冗余的CSS

    我们在写代码的时候可能有些CSS并没有用到,我们如何利用webpack将冗余的CSS清除掉呢? 可以使用 purifycss-webpack 达到该目的. 1.安装 purifycss-webpack ...

  3. Struts2,Spring,Hibernate框架的优缺点

    Struts2,Spring,Hibernate框架的优缺点 Struts2框架(MVC框架)的优点如下:         1)  实现了MVC模式,层次结构清晰,使程序员只需关注业务逻辑的实现:   ...

  4. [hadoop读书笔记] 第九章 构建Hadoop集群

    P322 运行datanode和tasktracker的典型机器配置(2010年) 处理器:两个四核2-2.5GHz CPU 内存:16-46GN ECC RAM 磁盘存储器:4*1TB SATA 磁 ...

  5. 在VMwear 11中的Mac OS X 10.11+ 进入恢复模式(Recovery HD)

    1,选中要启动的虚拟机,随后点击VM菜单的启动按钮后面向下箭头,随后点击菜单项”打开电源时进入固件“. 2,在虚拟机里面,用上下键移动到”Enter setup“上,随后继续下一步! 3,选中”Boo ...

  6. Mac 系统上安装Protocol buffer

    1. cd /Software/protobuf-2.5.0 2.sudo ./configure --prefix=$/Software/protobuf-2.5.0 3.sudo make 4.s ...

  7. SAP ML 物料分类账详解(含取消激活物料帐方法)

    一.业务背景: 中国会计准则规定,对存货的核算必须采用历史成本法(即实际成本法).如果企业采用计划成本法或者定额成本法进行日常核算的,应当按期结转其成本差异,将计划成本或者定额成本调整为实际成本. “ ...

  8. shell编程小结

    因为项目中要用到shell脚本,所以系统的看了一下.以前只是泛泛的了解. 变量:环境变量.预定义变量.位置变量.自定义变量. 环境变量这个好说,通过set或者env命令都能看到相应的列表,然后可以通过 ...

  9. Network In Network——卷积神经网络的革新

    Network In Network 是13年的一篇paper 引用:Lin M, Chen Q, Yan S. Network in network[J]. arXiv preprint arXiv ...

  10. 用Python中的tkinter模块作图(续)

    八.显示文字 用create_text在画布上写字.这个函数只需要两个坐标(文字x和y的位置),还有一个具名参数来接受要显示的文字.例如: >>> from tkinter impo ...