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时代一直发展到今天的专 ...
随机推荐
- CMake 命令行设定编译环境
笔者电脑安装了两个版本的VS(VS2012 和 VS2010),在使用CMake编译的时候,如果只在对应目录的命令行输入 "cmake .." 则系统会自动选择使用新版本(VS2 ...
- Print2flash在.NET（C#）64位中的使用，即文档在线预览
转:http://www.cnblogs.com/flowwind/p/3411106.html Print2flash在.NET(C#)中的使用,即文档在线预览 office文档(word,ex ...
- TIME-WAIT和CLOSE-WAIT
系统调优,你所不知道的TIME_WAIT和CLOSE_WAIT 2016-03-11 运维帮 来源微信订阅号:大房说 作者:大房 你遇到过TIME_WAIT的问题吗? 我相信很多都遇到过这个问题. ...
- win7如何共享文件 图文教你设置win7文件共享
点评:win7文件共享已成为网友们之间的热议,接下来为大家分享下如何共享文件,首先开启guest账户( 开始菜单 → 运行 → services.msc → 双击 server 服务项 ,设置启动类型 ...
- 详解 Objective-C 中的 Runtime
公司项目用到一个三方开源库,里面有个bug,不能改动源码,我想来想去,只能通过runtime这个万能的手段来解决.但是runtime 并不怎么会用,怎么办,马上学习呗.说到runtime,它是Obje ...
- php笔记01：php基本语法格式
1. <?php ....... ?> 2. <script laugnage="php"> ....... </script> 3. < ...
- [原]Eclipse 安装SVN、Maven插件（补充）
参考雨之殇的文章:Eclipse 安装SVN.Maven插件 1.SVN可以按文章介绍的正常安装 2.Maven的Eclipse插件地址有变化 文章中的安装链接已经失效:m2e - http://m2 ...
- 【转】android自动化测试之MonkeyRunner使用实例（三）
一.使用CMD命令打开模拟器 运行monkeyrunner之前必须先运行相应的模拟器或连上设备,不然monkeyrunner无法连接设备. 1.1 用Elipse打开Android模拟器或在CMD中 ...
- HTML兼容总结
所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+h ...
- scala学习笔记：理解并行集合par
scala> (1 to 5).foreach(println(_)) 1 2 3 4 5 scala> (1 to 5).par.foreach(println(_)) 3 1 4 2 ...