目录

           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. WEB三层架构与MVC

    web三层架构是指: >用户接口层(UI Layer) >业务逻辑层(Bussiness Layer) >持久化层 关于业务逻辑和用户接口 在早期的web开发中,因为业务比较简单,并 ...

  2. Hibernate关联关系配置(一对多、一对一和多对多)

    第一种关联关系:一对多(多对一) "一对多"是最普遍的映射关系,简单来讲就如消费者与订单的关系. 一对多:从消费者角的度来说一个消费者可以有多个订单,即为一对多. 多对一:从订单的 ...

  3. MVC 基础知识

    一. MVC架构1.MVC模式是一种严格实现应用程序各部分隔离的架构模式.隔离:分离关注点,松耦合2.模型(Model) 代表着核心的业务逻辑和数据.模型封装了域实体的属性和行为3.视图(View) ...

  4. oracle sqlldr控制文件模板

    Sqlldr userid=lgone/tiger control=a.ctl LOAD DATA INFILE 't.dat' // 要导入的文件 // INFILE 'tt.date' // 导入 ...

  5. 颠覆你的时空观-----理解傅立叶transform

    在知乎上看到的,非常不错,最起码知道为什么了: 傅立叶变换,拉普拉斯变换,z变换这三种方法的本质主要就是将信号从时域转换成频域,因为频域更好展开分析 = =. 频域只是另一种看到信号的角度(世界观). ...

  6. js实现网页打印分页打印

    web打印思路:html页面本身带有打印功能window.print() 但是在打印时又不能word模板的要求来打印不能满足打印需求.同时我们打印的数据有时候是动态变化的需要按模板来打印我的处理方式是 ...

  7. [转]SQL Server中临时表与表变量的区别

    [转]http://blog.csdn.net/skyremember/archive/2009/03/05/3960687.aspx 我们在数据库中使用表的时候,经常会遇到两种使用表的方法,分别就是 ...

  8. Ping其他电脑ping不通的解决方法

    要想Ping通其他电脑,首先要看被PING的电脑,是否允许PING. 一.在被PING电脑操作系统为XP下分为:1.被PING 电脑关闭了防火墙,就完全可以PING通:2.被PING 电脑开了防火墙, ...

  9. MySQL打包执行SQL

    当一次业务处理计算服务和数据库交互较多时,将可能有大量时间浪费在数据传输上,尤其对于计算服务和数据库跨机房或跨地区部署时,浪费的时间会极其可观.为了减少时间浪费可以使用MySQL提供的SQL打包功能. ...

  10. 服务器SSH连接时间设置

    用SSH客户端连接linux服务器时,经常会出现与服务器会话连接中断现象,造成这个问题的原因便是SSH服务有自己独特的会话连接机制. 解决方案: 1.设置服务器向SSH客户端连接会话发送频率和时间 v ...