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": " ...
随机推荐
- 【linux设备模型】之platform设备驱动
一.platform总线.设备和驱动 platform是一种虚拟总线,对应的设备称为platform_device,对应的驱动称为platform_driver. platform_devic ...
- Android数据的四种存储方式之SQLite数据库
Test.java: /** * 本例解决的问题: * 核心问题:通过SQLiteOpenHelper类创建数据库对象 * 通过数据库对象对数据库的数据的操作 * 1.sql语句方式操作SQLite数 ...
- Jquery Validate根据其他元素的事件来触发单个元素的异步校验
场景:在做一个车辆信息管理模块,而车牌是通过车牌颜色和车牌号码来确定唯一性的,录入车牌信息时需对车牌进行唯一性校验.
- 关于File.getPath,File.getAbsolutePath,File.getCanonicalPath的区别
这个问题, 不了解一下还是挺恍惚它们之间的区别的. 其实也挺简单的. getPath()-->>new File()时的路径 getAbsolutePath()-->>当前路径 ...
- Linux 内核Coding Style整理
转载:http://www.cnblogs.com/wang_yb/p/3532349.html 总结linux内核开发的coding style, 便于以后写代码时参考. 下面只是罗列一些规则, 具 ...
- 如何判断一个数是否为素数（zt）
怎么判断一个数是否为素数? 笨蛋的作法: bool IsPrime(unsigned n){ if (n<2) { //小于2的数即不是合数也不是素数 throw 0; ...
- Android基本控件之GridView
我们在使用手机的过程中,会看到一些图片配上文字的一些情况,今天我们就来介绍一下安卓控件的GridView GridView组件用来以网格方式排列视图,与矩阵类似,当屏幕上有很多元素(文字.图片或其他元 ...
- HBase-初看HBase
0.95版本hbase 单机模式下所有的服务都运行在一个JVM上,包括HBase和zookeeper.使用的是本地文件系统 日志默认放在目录下logs文件夹中 基本命令: create 'table' ...
- SingletonBeanRegistry
// 给定一个存在的object对象,该Registry将它存储为一个单例的根据给定的beanName(给定的object已经完全初始化完成,在访问Registry的单例object时应该是同步的)v ...
- iOS之与JS交互通信
随着苹果SDK的不断升级,越来越多的新特性增加了进来,本文主要讲述从iOS6至今,Native与JavaScript的交互方法 一.UIWebview && iframe && ...