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>
参数说明：
返回值是状态的字符串
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>
参数说明：
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动画库学习(五)的更多相关文章
- TweenMax动画库学习(六)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) Tw ...
- TweenMax动画库学习(四)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) Tw ...
- TweenMax动画库学习(一)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) Tw ...
- TweenMax动画库学习(二)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) Tw ...
- TweenMax动画库学习(三)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) ...
- TweenMax动画库学习
之前在做HTML5移动端开发的时候,用的都是Animate.css,这个插件封装的的确很好,但是在做一些缓动方面的动画,它也有一定的不足之处,比如手要写一个连续的动画,需要不停的去重复写函数,使得代码 ...
- animate.css –齐全的CSS3动画库--- 学习笔记
animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...
- TweenMax 动画库，知识点
官方地址:https://greensock.com/tweenmax github 地址:https://github.com/greensock/GreenSock-JS 比较好的介绍文章: ht ...
- TweenMax的GSAP（GreenSock动画平台）GSAP，专业的Web动画库
很好奇红框框里面的内容是什么,于是点了进去,又百度了下这个英文缩写具体指的什么东西. GSAP的全名是GreenSock Animation Platform,是一个从flash时代一直发展到今天的专 ...
随机推荐
- 比较escape、encodeURI、encodeURIComponent
估计很多前端工程师并不清楚escape,encodeURI, encodeURIComponent的区别,也不知道什么时候该用哪个方法,以及这些方法为什么要被用到,下面我主要来阐述一下这三个方法的区别 ...
- 解决Download interrupted: Connection to https://dl-ssl.google.com refused的问题
运行->drivers->etc->hosts 加入一行 74.125.237.1 dl-ssl.google.com ok! =================上述方法已经失效, ...
- hadoop实例---多表关联
多表关联和单表关联类似,它也是通过对原始数据进行一定的处理,从其中挖掘出关心的信息.如下 输入的是两个文件,一个代表工厂表,包含工厂名列和地址编号列:另一个代表地址表,包含地址名列和地址编号列.要求从 ...
- PhpCMS标签：专题模块special标签
专题模块 专题模块PC标签调用说明 模块名:special 模块提供的可用操作 操作名 说明 lists 专题列表 content_list 专题信息列表 hits 专题信息点击排序 下面对所有的操作 ...
- Spark之路 --- Scala IDE Maven配置（使用开源中国的Maven库）和使用
为什么要使用Maven 摘自百度百科的介绍 Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具.Maven 除了以程序构建能力为特色之外,还提 ...
- yum.pid 已被锁定
刚刚打开虚拟机,然后打算安装sharutils 工具在安装sharutils 工具的时候 终端提示 “/var/run/yum.pid 已被锁定,PID 为 1610 的另一个程序正在运行.” r ...
- [Qt5] 减少dll依赖和大小(特别是webkit的大小和依赖)
Qt5的依赖太多, 而且很dll非常大. 折腾了好久, 摸索了一些精简的方法. webkit是个非常蛋疼的东西, 依赖超多, 又很庞大. 所以需不需要webkit是完全不同的. 如何编译Qt5可以参考 ...
- SQL Server 2012 performance dashboard 安装
微软提供了一个很好用的工具performance dashboard: 下载地址: http://www.microsoft.com/en-us/download/details.aspx?id=29 ...
- Centos6.4安装Mono和MonoDevelop
Mono官方网站:http://www.mono-project.com MonoDevelop官方网站:http://monodevelop.com/ 注:整个安装过程最好在同一个终端下完成! ...
- AVL树的插入操作（旋转）图解
=================================================================== AVL树的概念 在说AVL树的概念之前,我们需要清楚 ...