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

今天要讲的是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. 【协议学习】SIP基本场景分析

    1.SIP业务基本知识 1．1 业务介绍 会话初始协议(Session Initiation Protocol)是一种信令协议,用于初始.管理和终止网络中的语音和视频会话,具体地说就是用来生成.修改和 ...

  2. vmrun命令

    VMWare提供了vmrun与VIX API两种手段使用户可以通过程序对虚拟机进行控制. 在官方文档中给出了详细的说明和示例代码.           vmrun:http://www.vmware. ...

  3. windows下 删除指定文件夹里面一周前的所有文件和文件夹的bat

    forfiles /p "指定文件夹路径" /m * /s /d -7 /c "cmd /c if @isdir==TRUE (rd /q @path) else del ...

  4. C# 使用XPath解析网页

    1.需要安装库HtmlAgilityPack ,官网http://htmlagilitypack.codeplex.com/ // From File var doc = new HtmlDocume ...

  5. struts+ajax+jquery：实现异步新增数据

    很久未有更新,最近因为团队其它事耽误没有继续学习,但心中十分忐忑不安,抽空把自己薄弱的点拿来再巩固一下! 本身异步刷新用处非常多,SSH框架对我来讲,已无难度,但结合ajax处理一些增删查改分页等,就 ...

  6. 第三百七十三节，Django+Xadmin打造上线标准的在线教育平台—创建用户app，在models.py文件生成3张表，用户表、验证码表、轮播图表

    第三百七十三节,Django+Xadmin打造上线标准的在线教育平台—创建用户app,在models.py文件生成3张表,用户表.验证码表.轮播图表 创建Django项目 项目 settings.py ...

  7. unity执行顺序问题（如何再次执行start方法）

    2016-09-08 20:13 2084人阅读 评论(1) 收藏 举报  分类: unity3D(66)  版权声明:本文为博主原创文章,未经博主允许不得转载. unity执行顺序的文章已经很多了, ...

  8. Python 判断文件是否存在的三种方法

    通常在读写文件之前,需要判断文件或目录是否存在,不然某些处理方法可能会使程序出错.所以最好在做任何操作之前,先判断文件是否存在. 这里将介绍三种判断文件或文件夹是否存在的方法,分别使用os模块.Try ...

  9. Linux 下 CPU 使用率与机器负载的关系与区别

    原文链接:  http://blog.chinaunix.net/uid-28541347-id-4926054.html 当我们使用top命令查看系统的资源使用情况时会看到load average, ...

  10. Linux free命令使用及解析

    1. 命令格式 free [参数] 2. 命令功能 free 命令显示系统使用和空闲的内存情况,包括物理内存.交互区内存(swap)和内核缓冲区内存.共享内存将被忽略 3. 命令参数 -b 以Byte ...