TweenMax动画库学习(四)
目录
上一节我们主要聊了TweenMax动画库中的seek()完成指定的动画（无过渡）、time() 动画已执行的时间、clear()：清除所有动画等方法的使用，接下来我们继续学习TweenMax动画库中的其它方法的使用。
TweenMax动画库的官方网址: http://greensock.com/timelinemax
下面我们直奔主题，开始介绍TweenMax动画库中的其它方法的使用：
1、staggerTo()：添加动画
参数说明：
1. 元素选择器或对象
2. 持续时间
3. 对象
变化的属性->值
4. 【可选】动画延迟发生时间
可写数字，“-=0.5”，“+=0.5“
页面布局
<script src="./../js/jquery-2.1.4.min.js"></script>
<script src="./../js/TweenMax.js"></script>
<style>
html,body{
margin: 0;
padding: 0;
}
.box{
width:100px;
height:100px;
background: #8D121A;
margin:1px 0;
}
</style>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
staggerTo("元素选择器或对象",持续时间,对象,动画延迟发生时间);
<script>
$(function(){
var t =new TimelineMax();
//t.to(".box",1,{width:300},1);
t.staggerTo(".box",2,{width:300},1);
//staggerTo()与to()的区别在于在设置相同的延迟时间的情况下，
//to()下的所有动画会同时进行，而staggerTo()下的动画会一个接着一个依次执行
});
</script>
2、 totalDuration()：获取动画的总时长
页面布局
<style>
html,body{
margin: 0;
padding: 0;
}
.div1{
width:100px;
height:100px;
background: #8D121A;
position: absolute;
top:0;
left:0;
}
</style>
<body>
<div class="div1"></div>
</body>
totalDuration()
<script>
$(function(){
var t =new TimelineMax();
t.to(".div1",1,{left:300},1);
t.to(".div1",1,{width:300},"+=1");
t.to(".div1",1,{height:300});
console.log(t.totalDuration());//5 //获取动画的总时长
});
</script>
3、getLabelTime()：返回从开始到当前状态的时间
参数说明：
1. 状态的字符串
返回值是一个数字
getLabelTime(字符串)
<script>
$(function(){
var t =new TimelineMax();
t.add("state1");
t.to(".div1",1,{left:300},1);
t.add("state2");
t.to(".div1",1,{width:300},"+=1");
t.add("state3");
t.to(".div1",1,{height:300});
console.log(t.getLabelTime("state2")); //2 //返回从开始到当前状态的时间
});
</script>
部分动画演示：
代码打包下载：
链接: http://pan.baidu.com/s/1slrGZvR 密码: kg99
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 ...
- 0003.5-20180422-自动化第四章-python基础学习笔记--脚本
0003.5-20180422-自动化第四章-python基础学习笔记--脚本 1-shopping """ v = [ {"name": " ...
随机推荐
- MySQL锁系列1
http://www.cnblogs.com/xpchild/p/3782311.html MySQL的锁:MySQL内部有很多种类的锁,按照用途不同,可以分为两类:1. 保护内存结构的锁,实现同 ...
- mydumper原理2
使用mydumper备份发生Waiting for table flush,导致所有线程都无法读和写 版本 mydumper 0.9.1OS centos6.6 X86_64mysql 5.6.25- ...
- python 2.5源代码编绎
VS C++项目中,选择工程项名称,右菜单中选择--->仅适用于项目---->仅生成(项目) 1.make_buildinfo,make_versioninfo make_buildinf ...
- C++重载（主要介绍使用友元函数重载）
重载限制 多数C++运算符都可以用下面的方式重载.重载的运算符不必是成员函数,但必须至少有一个操作数是用户自定义的类型.下面详细介绍C++对用户定义的运算符重载的限制. 1 重载后的运算符必须至少有一 ...
- Redis HyperLogLog
Redis 在 2.8.9 版本添加了 HyperLogLog 结构. Redis HyperLogLog 是用来做基数统计的算法,HyperLogLog 的优点是,在输入元素的数量或者体积非常非 ...
- Linux 引导过程内幕
转载:http://www.ibm.com/developerworks/cn/linux/l-linuxboot/index.html 从主引导记录到第一个用户空间应用程序的指导 引导 Linu ...
- 以WCF安全认证方式调用通用权限管理系统获取基础信息资料
在B/S开发中,涉及到获取系统基础资料的问题,因为是在不同平台下的开发,采用了WCF方式获取. 下面是一个调用通用权限管理系统(吉日嘎拉)基础信息资料的一个demo供参考 调用原理图: web.con ...
- Emacs安装auto-complete
分别下载各个el文件 auto-complete-mode 主源码库 https://github.com/auto-complete/auto-complete 把zip文件下载后,复制auto-c ...
- 阅读《RobHess的SIFT源码分析：综述》笔记2
今天开始磕代码部分. part1: 1. sift特征提取. img1_Feat = cvCloneImage(img1);//复制图1,深拷贝,用来画特征点 img2_Feat = cvCloneI ...
- javaweb学习总结四(反射技术)
一:反射的概念 反射就是加载类,然后获取类的属性.方法.构造函数等. 二:加载类到内存(有硬盘字节码文件到内存) 三种加载类的方式: @Test // 测试加载类 public void test1( ...