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时代一直发展到今天的专 ...
随机推荐
- iOS开发——数据持久化&使用NSUserDefaults来进行本地数据存储
使用NSUserDefaults来进行本地数据存储 NSUserDefaults适合存储轻量级的本地客户端数据,比如记住密码功能,要保存一个系统的用户名.密码.使用NSUserDefaults是首 ...
- MYSQL查询今天昨天本周本月等的数据
mysql查询本季度 今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT *FROM表名WHERE TO_DAYS ...
- Helpers\PHPMailer
Helpers\PHPMailer PHPMailer is a third party class for sending emails, Full docs are available athtt ...
- DataTable转换为Model实体对象
记得在学校的时候,接触得最多的就是SqlHelper,每次在读取的时候不管是DataTable还是DataReader转换为实体对象的时候是最恼火的,因为要写很多代码,而且没有什么意义.后面接触到了反 ...
- css笔记18：盒子模型案例分析示范
- jq选择器 第一部分
没有什么新意,全是从网上摘抄的,如果哪天忘了,就来查查吧. 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(documen ...
- Spring 事务管理高级应用难点剖析--转
第 1 部分 http://www.ibm.com/search/csass/search/?q=%E4%BA%8B%E5%8A%A1&sn=dw&lang=zh&cc=CN& ...
- Java从Jar文件中动态加载类
动态加载jar包,在实际开发中经常会需要用到,尤其涉及平台和业务的关系的时候,业务逻辑部分可以独立出去交给业务方管理,业务方只需要提供jar包,就能在平台上运行. 下面通过一个实例来直观演示: 第一: ...
- linux nginx启动 重启 关闭命令
启动操作 nginx -c /usr/local/nginx/conf/nginx.conf -c参数指定了要加载的nginx配置文件路径 停止操作停止操作是通过向nginx进程发送信号来进行的 步骤 ...
- css3 calc()：css简单的数学运算-加减乘除
css3 calc():css简单的数学运算–加减乘除 多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 10 ...