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时代一直发展到今天的专 ...
随机推荐
- Sublime Text 超好用的侧栏插件SideBarEnhancements
SideBarEnhancements插件有效地改进了Sublime Text的侧边栏.安装插件后在侧边栏上点击右键,可以找到一下新功能:在资源管理器中打开.新建文件.新建文件夹.以…打开.在浏览器中 ...
- 一步一步写算法（之hash表）
[ 声明:版权全部,欢迎转载,请勿用于商业用途. 联系信箱:feixiaoxing @163.com] hash表,有时候也被称为散列表.个人觉得,hash表是介于链表和二叉树之间的一种中间结构.链 ...
- RotatingDoughnut
RotatingDoughnut.zip
- [MODx] 8. Snippet get data, chunk display
Simple Example: Lets process this chunk and output its value. We have this Chunk, called "Welco ...
- solr-1.4.1 环境配置
solr-1.4.1 环境配置: Solr是一个apache名下非常好用的开源索引.搜索工具,网上的资料虽多但非常杂,笔者花了一天的时间对Solr进行了较为初步的研究,对Solr的基础应用做了一定的总 ...
- html5中viewport使用
html5中viewport使用 转载自:http://www.maoegg.com/the-usage-of-viewport-in-html5/ 用html5开发移动应用时往往会遇到手机的分辨率或 ...
- eoe推荐的优秀博客
<a href="http://my.eoe.cn/huodong/archive/5430.html">http://my.eoe.cn/huodong/archiv ...
- Socket异步通信学习二
接下来是服务器部分,采用异步模式,新建了一个AsynServer类,用于存放socket服务器代码,主要有4个方法: 有一个全局socket,下面四个方法中都用到. Socket socket = n ...
- Android（java）学习笔记124：Android权限大全
访问登记属性 android.permission.ACCESS_CHECKIN_PROPERTIES读取或写入登记check-in数据库属性表的权限 获取错略位置 android.permissio ...
- 配置opencv
先把opencv配置起来: 详细参见: http://blog.163.com/chen_dawn/blog/static/1125063201461695238801/ 我的机器的配置方法: 先去环 ...