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时代一直发展到今天的专 ...
随机推荐
- 理解 auto_ptr<T>
1.auto_ptr<T>解决什么问题? 在堆上获取的资源,客户可能会忘记delete,或者由于异常没有执行到delete,导致资源泄漏.在栈上分配的对象,有个特点,不论出现什么情况,超出 ...
- BZOJ 1927: [Sdoi2010]星际竞速 费用流
1927: [Sdoi2010]星际竞速 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/pr ...
- JavaScript学习总结-技巧、有用函数、简洁方法、编程细节
整理JavaScript方面的一些技巧.比較有用的函数,常见功能实现方法,仅作參考 变量转换 //edit http://www.lai18.com var myVar = "3.14159 ...
- 文件I/O之ioctl函数
ioctl函数是I/O操作的杂物箱.不能用其他函数表示的I/O操作通常都能用ioctl表示.终端I/O是ioctl的最大使用方面. ioctl函数通过对文件描述符发送特定的命令来控制文件描述符所代表的 ...
- 获取select值
//Jquery中select的使用 //select获取当前选中的value值 $('#sel').change(function () { var depId = $(this).children ...
- Intent的介绍
一.Intent的介绍 Intent的中文意思是“意图,意向”,在Android中提供了Intent机制来协助应用间的交互与通讯,Intent负责对应用中一次操作 的动作.动作涉及数据.附加数据进行描 ...
- Create RCU
BI创建(数据)分析.仪表盘.报表前,都需要对数据进行建模,在oracle biee里称为创建“资料档案库”-该文件后缀为RPD,所以一般也称为创建RPD文件. 步骤: 1.从windows开始菜单里 ...
- 听说alphago又要挑战sc2了？——我眼中的人工智能
乱谈: 之前alphago进行的围棋比赛相当火爆. 一时间我的朋友圈都爆了,因为同学以及相关专业的同学都在发这个,毕竟逼格一下就起来了,我也大肆转发.各种角度,不同层次的不同深度的文章也都扫了几眼. ...
- ubuntu nexus 安装
今天公司组织学习使用linux系统搭建nexus maven私服中央仓库,在公司使用centos搭建了一个,回家又用ubuntu搭建一个,主要是为了能熟悉整个流程,现将主要过程总结如下:(PS:楼主是 ...
- 服务端缓存HttpRuntime.Cache的使用
HttpRuntime.Cache.Insert("缓存key", "缓存content", null, DateTime.Now.AddMinutes(3), ...