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时代一直发展到今天的专 ...
随机推荐
- C#面向对象(一) 封装
一.什么叫做面向对象封装? 封装的概念:隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读取和修改的访问级别. 二.面向对象封装有什么好处(为什么要封装)? 封装的目的:是增强安全性和简化 ...
- Cisco 交换机的操作
Cisco的工作模式 Cisco设备有常用模式为:用户模式.特权模式.全局模式.端口模式.首先它们之间呈现出递进关系:用户模式->特权模式->全局模式->端口模式 1.用户模式 交换 ...
- [未完成][Mooc]关于线程的总结
进程和线程.Eclipse,QQ都是进程.是程序或者任务的执行过程,是动态性.持有资源(共享内存,共享文件)和线程. 这个资源就是内存. 每个程序在运行的时候都会分配一些内存. Eclipse中的源代 ...
- hdu3584 树状数组
思路:从一维扩展到三维.可以看看poj2155的解法. #include<iostream> #include<cstring> #include<algorithm&g ...
- 转：iOS基于MVC的项目重构总结
转:http://www.cocoachina.com/ios/20160519/16346.html 关于MVC的争论 关于MVC的争论已经有很多,对此我的观点是:对于iOS开发中的绝大部分场景来说 ...
- 移动平台的meta标签-----神奇的功效（转）
对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究 ...
- 转：传入的表格格式数据流(TDS)远程过程调用(RPC)协议流不正确 .
近期在做淘宝客的项目,大家都知道,淘宝的商品详细描述字符长度很大,所以就导致了今天出现了一个问题 VS的报错是这样子的 ” 传入的表格格式数据流(TDS)远程过程调用(RPC)协议流不正确“ 还说某 ...
- jquery基础教程读书总结
最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...
- 《跨终端Web》读书笔记
跨终端的Web成为了趋势,而这本书就是讲了在这种趋势下进行开发的常见问题及其解决方案,可能是限于篇幅,每个方面都没有展开细说,但这是这样让本书干货满满,几乎没有一句废话. 下面是一些笔记. Web的本 ...
- 找出文件正在被哪个windows进程使用的方法
Ever try to delete, move, or rename a file only to get a Windows system warning with something like ...