TweenMax动画库学习(二)
目录
上一节我们主要聊了TweenMax动画库中的to()：添加动画、play()播放动画、stop()停止动画、reverse()反向执行动画、onComplete()：运动结束后触发对应的函数、 onReverseComplete()：反向运动结束后触发对应的函数等方法的使用，接下来我们继续学习TweenMax动画库中的其它方法的使用。
TweenMax动画库的官方网址: http://greensock.com/timelinemax
下面我们直奔主题，开始介绍TweenMax动画库中的其它方法的使用：
<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>
参数说明：
字符串或一个函数
add("字符串")
<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");
});
</script>
add(函数)
<script>
$(function(){
var t =new TimelineMax();
t.to("#div1",2,{left:300});
t.add(function(){
$("#div1").css("background","blue");
});
t.to("#div1",2,{width:300});
t.to("#div1",2,{height:300});
});
</script>
2、TweenTo---完成指定的动画（过渡）
参数说明：
指定时间或状态的字符串
TweenTo（时间）
<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.stop();
t.tweenTo(1.5);//完成指定的动画（过渡）
});
</script>
TweenTo（"字符串"）
<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.stop();
t.tweenTo("state2"); //完成指定的动画（过渡）
});
</script>
add()与tweenTo()综合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TweenMax动画库学习(二)</title>
<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>
<script>
// add---添加状态
// 参数说明：
// 1. 字符串或一个函数
// TweenTo---完成指定的动画（过渡）
// 参数说明：
// 1. 指定时间或状态的字符串
$(function(){
var t =new TimelineMax();
t.to("#div1",2,{left:300});
t.add("state1");//添加状态
t.add(function(){
$("#div1").css("background","blue");
});
t.to("#div1",2,{width:300});
t.add("state2");
t.to("#div1",2,{height:300});
t.add("state3");
t.stop();
t.tweenTo("state2"); //完成指定的动画（过渡）
// t.tweenTo(1.5);
});
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
动画演示：
代码打包下载：
链接: http://pan.baidu.com/s/1dFrzxy5 密码: g9ww
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动画库学习(三) ...
- 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时代一直发展到今天的专 ...
随机推荐
- c++简单的ATL COM开发和调用实例（转）
c++简单的ATL COM开发和调用实例 1.打开VS2010,新建ATL COM 项目,步骤:“文件” -->“新建” -->“项目”,选择“Visual C++” -->“ATL ...
- Getting Started With Python Internals
http://akaptur.com/blog/2014/08/03/getting-started-with-python-internals/
- java_泛型 TreeSet 判断hashcode/length(升序排列)
package ming; import java.util.ArrayList; import java.util.Collection; import java.util.Comparator; ...
- [置顶] 博客已迁移至ryantang.me
大家好,感谢大家一直以来的支持,本博客内容已停止更新,新内容将发布到我的新博客,地址是:ryantang.me,欢迎大家继续支持,我会在ryantang.me上发布内容更丰富的文章内容,谢谢! Rya ...
- Asp.Net 之 下载文件的常用方式
1.直接使用Response.TransmitFile(filename)方法 protected void Button_Click(object sender, EventArgs e) { /* ...
- [转].net连oracle的问题及方法折腾总结 连接字串
本文转自:http://www.th7.cn/Program/net/201305/138265.shtml 对oracle不算熟,对.net结合oracle开发项目也只做过一个.最近换了新电脑,装了 ...
- Java系统程序员修炼之道
一:Java语言学习 对线程(thread),串行化,反射,网络编程,JNI技术,容器(Map,List, Iterator), 类加载器 (ClassLoader),输入输出流,垃圾回收机制, 有比 ...
- HuffmanTree && HuffmanCode
如何构造HuffmanTree? Huffman算法: (1)根据给定的n个权值{w1, w2, ...,wn}构成n棵二叉树集合
- mysql datetime 排序
在项目里面,使用mysql datetime desc,看见别人使用UNIX_TIMESTAMP(datetime) desc,就用了 datetime进行比较,使用UNIX_TIMESTAMP()进 ...
- 调用java的webservice返回null
When you try invoke a Java/Axis Web Service from a proxy class generated by Visual Studio 2005 or Vi ...