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时代一直发展到今天的专 ...
随机推荐
- 【转】与BT下载相关的概念
1. DHT DHT全称叫分布式哈希表(Distributed Hash Table),是一种分布式存储方法.在不需要服务器的情况下,每个客户端负责一个小范围的路由,并负责存储一小部分数据,从而实现整 ...
- Chart控件的多种使用方法
花了近一周时间专门研究.net 3.5平台提供的Chart控件的使用方法,感觉该控件的功能很强大,做出的图表效果也很美观,使用方法也并不复杂.如今先讲下Chart控件的部署及一些基本使用方法. 一.安 ...
- USB移动硬盘WinPE启动盘的制作方法
USB移动硬盘WinPE启动盘的制作方法 软件:老九WinPE 老毛桃终于撒手无论版 发行时间:2007年9月11日 制作发行:老毛桃 作用:当系统坏了,无法进入时,用来做系统维护,备份文件.轻巧稳定 ...
- 打开已存在 Android项目及常见的问题
Eclipse 打开已存在 Android项目及常见的问题 1. 点击菜单“File”-- "Import",会弹出 Import 对话框: 2, 选择“General ...
- sphinx配置文件继承
# # Minimal Sphinx configuration sample (clean, simple, functional) # source mysql { type = mysql #数 ...
- Android中Touch事件分析--解决HorizontalScrollView滑动和按钮事件触发问题
之前写过关于HorizontalScrollView滑动和按钮事件触发问题,但是不能所有的情况,最近几天一直在想这个问题,今天有一个比较好的解决思路,最终应用在项目里面效果也很好,首先说明一下功能: ...
- 【转】java静态代码块和构造方法执行顺序
先看看下面几个类,然后判断它们的输出public class A { static{System.out.print(1);}public A(){System.out.print(2);}} pub ...
- ios运行某些工程时屏幕上下出现黑边的解决办法
今天准备了解下MVVM设计模式,于是就从GitHub上Down了一个MVVM的demo(地址在这)学习,下载之后,在模拟器上运行一下,出现如下图上下有黑边,以前也遇到过这个问题,但当时没有记录,现在还 ...
- Arp欺骗攻击的另类应用之屌丝泡妞记
http://www.2cto.com/Article/201210/163974.html arp欺骗,我想大家都应该知道怎么回事了.不知道的去问度娘... 就不废话了,还是直接上图上教程比 ...
- MySql安装步骤详解，MySql的root密码设置，启动MySql服务。
1.下载mysql安装包,并解压,双击mysql-5.6.24-winx64.msi 2.点击下一步 3.选择custom 4.选择安装内容和位置,5个安装内容要选择will be installed ...