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时代一直发展到今天的专 ...
随机推荐
- [Webpack] Use the Webpack Dashboard to Monitor Webpack Operations
Learn how to use the new Webpack Dashboard from Formidable Labs to display a pretty, useful output f ...
- Clover
为您的 Windows Explorer 插上翅膀! Clover 是 Windows Explorer 资源管理器的一个扩展,为其增加类似谷歌 Chrome 浏览器的多标签页功能. 方便的 Tab ...
- DebuggingWithGdb
https://wiki.python.org/moin/DebuggingWithGdb http://blog.nsfocus.net/python-program-troubleshooting ...
- [009]C---关于输出文本的打印问题
现在有这样一个问题: 针对一个long类型的变量,我们想把它打印成为32位显示. #include "stdio.h" int main() { long i =0xa; prin ...
- PAT 1013
1013. Battle Over Cities (25) It is vitally important to have all the cities connected by highways i ...
- tar备份系统的方法
下面是备份系统的方法: 然后打开终端,输入以下命令: 1.成为根用户: sudo su 2.转到根目录: cd / 然後,下面就是我用来备份我的系统的完整的命令:tar -cvpzf /med ...
- Component migration documentation
Component migration documentation The following is a list of migration documents for components we s ...
- 三个案例带你看懂LayoutInflater中inflate方法两个参数和三个参数的区别
关于inflate参数问题,我想很多人多多少少都了解一点,网上也有很多关于这方面介绍的文章,但是枯燥的理论或者翻译让很多小伙伴看完之后还是一脸懵逼,so,我今天想通过三个案例来让小伙伴彻底的搞清楚这个 ...
- 万能的Entry，两个变量的Model/JavaBean再也不用写了!
前言 很多时候传数据需要只含两个变量的Model/JavaBean,但就为了两个变量去写一个Model/JavaBean实在是麻烦,而且类型固定重用性低.比如: 1.网格显示的头像-名称 需要 Str ...
- Oracle inactive session (last_call_et)
注意last_call_et的值, select s.status,s.last_call_et,s.* from v$session s where username='DDD'; 在本例中,开了个 ...