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;
left:0;
top:100px;
}
</style>
<body>
<div id="div1"></div>
</body>
参数说明：
1. 指定时间或状态
2. 【可选】布尔值
true：不执行函数 默认
false: 执行函数
seek(时间)
<script>
$(function(){
var t =new TimelineMax();
t.to("#div1",2,{left:300});
t.to("#div1",2,{width:300});
t.to("#div1",2,{height:300});
t.seek(2);//直接运动到设置的时间点，后面的运动会接着运动
});
<script>
seek("状态")
<script>
$(function(){
var t =new TimelineMax();
t.to("#div1",2,{left:300});
t.add("state1");
t.to("#div1",2,{width:300});
t.add("state2");
t.to("#div1",2,{height:300});
t.add("state3");
t.seek("state2");//直接运动到设置的状态，后面的运动会接着运动
});
</script>
seek("状态",false)
<script>
$(function(){
var t =new TimelineMax();
t.to("#div1",2,{left:300,onComplete:function(){
alert("left:300");
}});//标记一
t.add("state1");
t.to("#div1",2,{width:300,onComplete:function(){
alert("width:300");
}});
t.add("state2");
t.to("#div1",2,{height:300});
t.add("state3");
t.seek("state1",false);//直接运动到设置的状态，但会执行【标记一】中的函数，后面的运动会接着运动
</script>
3、time() 动画已执行的时间
参数说明：
动画已执行的时间
<script>
$(function(){
var t =new TimelineMax();
t.to("#div1",2,{left:300,onComplete:function(){
alert("left:300");
}});
t.add("state1");
t.to("#div1",2,{width:300,onComplete:function(){
alert("width:300");
}});
t.add("state2");
t.to("#div1",2,{height:300});
t.add("state3");
t.seek("state3",false);
console.log(t.time()); //6 //动画已执行的时间
});
</script>
4、clear()：清除所有动画
参数说明：
清除所有动画
<script>
$(function(){
var t =new TimelineMax();
t.to("#div1",2,{left:300,onComplete:function(){
alert("left:300");
}});
t.add("state1");
t.to("#div1",2,{width:300,onComplete:function(){
alert("width:300");
}});
t.add("state2");
t.clear(); //清除state2之前的所有动画，后面的动画依然继续执行
t.to("#div1",2,{height:300});
t.add("state3");
});
</script>
seek()、time()、clear()综合使用
<script>
// seek()：完成指定的动画（无过渡）
// 参数说明：
// 1. 指定时间或状态
// 2. 【可选】布尔值
// true：不执行函数 默认
// false: 执行函数
// time()：动画已执行的时间
// clear()：清除所有动画
$(function(){
var t =new TimelineMax();
t.to("#div1",2,{left:300,onComplete:function(){
alert("left:300");
}});
t.add("state1");
t.to("#div1",2,{width:300,onComplete:function(){
alert("width:300");
}});
t.add("state2");
// t.clear(); //清除所有动画
t.to("#div1",2,{height:300});
t.add("state3");
// t.stop();
t.seek("state3",false);
console.log(t.time()); //6 //动画已执行的时间
});
</script>
动画演示：
代码打包下载：
链接: http://pan.baidu.com/s/1nvMrrjN密码: qp44
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动画库学习(三) Tw ...
- 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时代一直发展到今天的专 ...
随机推荐
- PHP函数ip2long转换IP时数值太大产生负数的解决办法
有两种办法: 1. bindec( decbin($long)) 利用bindec和decbin两个函数转换一次就没有问题了 我一直在用上面的方法,但是在升级到PHP7以后就不起作用了(因为最近只进 ...
- linux netlink套接字学习资料
理论: http://blog.csdn.net/unbutun/article/details/3394061 进一步深入: http://edsionte.com/techblog/archive ...
- jquery 源码分析学习地址
http://www.ccvita.com/121.htmljQuery工作原理解析以及源代码示例http://www.cnblogs.com/haogj/archive/2010/04/19/171 ...
- Best Practice of cross-platform games
__super keyword this keyworld is offered only by Microsoft VC. So you had to call the very name of p ...
- 多边形节点编码python脚本
# -*- coding: cp936 -*-#本脚以最左边.Y值最大的点为起始点按顺时针为多边形节点编码,生成一个包含记录编码值和多边形FID字段的点要素类 #注意:#1.本脚本作为arcgis脚本 ...
- Swift超详细的基础语法-结构体,结构体构造器,定义成员方法, 值类型, 扩充函数
知识点 基本概念 结构体的基本使用 结构体构造器(构造函数/构造方法) 结构体扩充函数(方法), 又称成员方法 结构体是值类型 1. 基本概念 1.1 概念介绍 结构体(struct)是由一系列具有相 ...
- ios代理设计模式
代理设计模式的作用: 1.A对象监听B对象的一些行为,A成为B的代理 2.B对象想告诉A对象一些事情,A成为B的代理 代理设计模式的总结: 如果你想监听别人的一些行为,那么 ...
- Linux上安装Squall
Squall是Storm之上的类SQL查询工具,能够将类SQL语句转换成topology,然后提交给Storm运行. 安装Squall前要先安装Java和sbt(simple build tool), ...
- ubuntu_scrapy 安装
1:install pip python-dev sudo apt-get install python-dev sudo apt-get install libevent-dev ...
- Jquery方法大全
一.JQuery常用的方法 :(JQuery中90%都是方法,没有参数是获取,带参数是设置) $("#id").css('backgroundColor','blue'); .cs ...