目录

           TweenMax动画库学习(一)

           TweenMax动画库学习(二)

           TweenMax动画库学习(三)

           TweenMax动画库学习(四)

           TweenMax动画库学习(五)  

           TweenMax动画库学习(六) 

上一节我们主要聊了TweenMax动画库中的add()添加状态、tweenTo()完成指定的动画(过渡)等方法的使用,接下来我们继续学习TweenMax动画库中的其它方法的使用。

TweenMax动画库的官方网址: http://greensock.com/timelinemax

      下面我们直奔主题,开始介绍TweenMax动画库中的其它方法的使用:

1、页面布局

 <script src="./../js/jquery-2.1.4.min.js"></script>
 <script src="./../js/TweenMax.js"></script>
 <style>
         html,body{
             margin: 0;
             padding: 0;
         }
         .div1{
             width:100px;
             height:100px;
             background: #8D121A;
             position: absolute;
             top:150px;
             left:0;
         }
 </style>
 <body>
 <div id="label"></div>
 <div class="div1"></div>
 </body>
    2、currentLabel():获取当前状态

     参数说明:

 返回值是状态的字符串

currentLabel()

 <script>
         $(function(){
             var t =new TimelineMax();
             t.add("state1");
             t.to(".div1",1,{left:300,onComplete:function(){
                 getCurrentLabel();
             }},1);
             t.add("state2");
             t.to(".div1",1,{width:300,onComplete:function(){
                 getCurrentLabel();
             }},"+=1");
             t.add("state3");
             t.to(".div1",1,{height:300,onComplete:function(){
                 getCurrentLabel();
             }});
             getCurrentLabel();
             //获取当前状态
             function getCurrentLabel(){
                 console.log(t.currentLabel()); //控制台打印输出当前动画运动到的状态
             }
         });
 </script>
    3、getLabelAfter():获取下一个状态

     参数说明:

  1. 时间数字
            返回值是状态的字符串,如果没有下一个状态返回null

 getLabelBefore():获取上一个状态

     参数说明:

  1. 时间数字
            返回值是状态的字符串,如果没有上一个状态返回null
 <script>
 $(function(){
             var t =new TimelineMax();
             t.add("state1");
             t.to(".div1",1,{left:300,onComplete:function(){
                 getCurrentLabel();
             }},1);
             t.add("state2");
             t.to(".div1",1,{width:300,onComplete:function(){
                 getCurrentLabel();
             }},"+=1");
             t.add("state3");
             t.to(".div1",1,{height:300,onComplete:function(){
                 getCurrentLabel();
             }});
             getCurrentLabel();
             //获取当前状态
             function getCurrentLabel(){
                 //获取当前的时间
                 var currentTime = t.getLabelTime( t.currentLabel() );
                 //获取到上一个状态
                 var beforeLabel = t.getLabelBefore( currentTime );
                 //获取到下一个状态
                 var afterLabel  = t.getLabelAfter( currentTime );
                 var str = "<p>上一个状态:"+ beforeLabel +"</p><p>当前状态:"+ t.currentLabel() +"</p><p>下一个状态:"+ afterLabel +"</p>";
                 $("#label").html( str );
             }
         });
 </script>

动画演示:

代码打包下载:

链接: http://pan.baidu.com/s/1eSz4Xz0 密码: wgw3

TweenMax动画库学习(五)的更多相关文章

  1. TweenMax动画库学习(六)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  2. TweenMax动画库学习(四)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  3. TweenMax动画库学习(一)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  4. TweenMax动画库学习(二)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  5. TweenMax动画库学习(三)

    目录               TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)           ...

  6. TweenMax动画库学习

    之前在做HTML5移动端开发的时候,用的都是Animate.css,这个插件封装的的确很好,但是在做一些缓动方面的动画,它也有一定的不足之处,比如手要写一个连续的动画,需要不停的去重复写函数,使得代码 ...

  7. animate.css –齐全的CSS3动画库--- 学习笔记

    animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...

  8. TweenMax 动画库,知识点

    官方地址:https://greensock.com/tweenmax github 地址:https://github.com/greensock/GreenSock-JS 比较好的介绍文章: ht ...

  9. TweenMax的GSAP(GreenSock动画平台)GSAP,专业的Web动画库

    很好奇红框框里面的内容是什么,于是点了进去,又百度了下这个英文缩写具体指的什么东西. GSAP的全名是GreenSock Animation Platform,是一个从flash时代一直发展到今天的专 ...

随机推荐

  1. Dll的生成,转化为OMF格式的DLL

    extern "C" { __declspec(dllexport) int psq_add(int a, int b); } C:\Users\pansq>mkexp my ...

  2. 爬虫例子及知识点(scrapy知识点)

    新知识: 新建一个scrapy项目:scrapy startproject xxx(项目名称) 运行一个scrapy项目:scrapy crawl xxx(项目名称) 项目文件说明: 文件说明: • ...

  3. SQLServer2005中查询语句的执行顺序

    SQLServer2005中查询语句的执行顺序   --1.from--2.on--3.outer(join)--4.where--5.group by--6.cube|rollup--7.havin ...

  4. cocos2dx动画Animation介绍

     一.帧动画 你能够通过一系列图片文件,像例如以下这样,创建一个动画: [cpp]   CCAnimation *animation = CCAnimation::create();   //从本 ...

  5. OSX: 10.9的SMB网络共享连接可能破坏其权限设置

    参见以前的Blog,“OSX: 10.9 Mavericks的重要更新技术细节(1)”,自从10.9之后,它的内核默认地使用全新的SMB2协议,这本来是令人期待的变化,不过根据这多年来和OS X系统的 ...

  6. E212:无法打开并写入文件

    用vi编辑文件是  老师出现这样的错误 有些文件   需要root权限才能修改   切换成root权限就行了

  7. TCP模型及其重点协议总结

    概述 TCP/IP协议族,作为最早的协议模型(后来OSI七层也是在该基础上细分而来),每层都有一些重点的协议,面试时也会被询问,快要找工作,得做一些总结了 [1]TCP4层协议模型概述 [2]各层重点 ...

  8. SQL总结 连表查询

    连接查询包括合并.内连接.外连接和交叉连接,如果涉及多表查询,了解这些连接的特点很重要. 只有真正了解它们之间的区别,才能正确使用. 1.Union UNION 操作符用于合并两个或多个 SELECT ...

  9. 012 HDFS API 文件读写代码演示

    一:准备工作 1.新建class类 2.开启HDFS服务 3.将配置文件拷贝进resources路径 方便了Configuration的读取配置. 二:读出HDFS文件系统中的文件到控制台 4.读出在 ...

  10. C# 图片和Base64之间的转换

    public static Bitmap GetImageFromBase64String(string strBase) { try { MemoryStream stream = new Memo ...