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时代一直发展到今天的专 ...
随机推荐
- POJ 3080 Blue Jeans （KMP）
求出公共子序列 要求最长 字典序最小 枚举第一串的所有子串 然后对每一个串做KMP.找到目标子串 学会了 strncpy函数的使用 我已可入灵魂 #include <iostre ...
- 计算机思维or人的思维
计算机领域就会有计算机领域的一些特性和一些思维方式,或者说有他自己的一些问题,须要用相应的思维方式来进行理解它,从而更好的驾驭他.有些时候遇到的一些问题,自己想却想不明确,也是由于我们没有把自己当做一 ...
- 关于unity3d播放flash动画，使用插件uniswf
主要就是代码了. 1.using UnityEngine; using System.Collections; using pumpkin.swf; using System.Collections. ...
- 征服 Nginx + Tomcat
2年前一直折腾Apache,现如今更习惯Nginx. 搭建网站又遇到2年前遇到的问题——Session同步. (参考我以前的帖子——征服 Apache + Tomcat)只不过现今担当负载均衡的Apa ...
- JSON数据格式以及与后台交互数据转换实例
/* 作者:烟大阳仔 时间:20131013 介绍:主要了解一下json的格式,看看数据是怎么存储的 */ <!DOCTYPE html PUBLIC "-//W3C//DTD HTM ...
- 【问题汇总】ListView的FooterView设置可见性的问题
ListView的FooterView一般用来给用户展示一些提示信息. 正常情况下,是这么使用的.代码例如以下: // footer footerLayout = new PullLoadingLay ...
- android 带表头,左右两个联动的ListView
package com.rytong.mylist; import java.util.ArrayList; import java.util.HashMap; import java.util.Li ...
- IOS开发之——颜色设置
颜色设置: 指定RGB,參数是:红.绿.黄.透明度,范围是0-1 + (UIColor *)colorWithRed:(CGFloat)red green:(CGFloat)green blue:(C ...
- C++中如何修改const变量
一.结论 声明:不同于C语言的const变量修改问题(可以通过指针间接修改const变量的值),这里只讨论C++ 里的const. C++ const 修饰符,表示常量,即如果以后保证不会修改则声 ...
- JQuery+EasyUI弹窗代码
来源:http://www.cnblogs.com/taven/p/3330125.html <head>需要引用的文件: <link href="../JS/EasyUi ...