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时代一直发展到今天的专 ...
随机推荐
- java 十六进制数的转换
今天晚上做了一道java基础题,题目看起来简单,但是实现起来却花了我近两个小时的时间,认真的做这道题,你会发现它特别考你的基本功.有兴趣的可以试一下哦. 题目: 请用此语言编写如下函数,采用自己的算法 ...
- iOS开发——UI篇OC&transform详解
transframe属性详解 1. transform属性 在OC中,通过transform属性可以修改对象的平移.缩放比例和旋转角度 常用的创建transform结构体方法分两大类 (1) 创建“基 ...
- android学习日记15--WebView(网络视图)
一.WebView 1.简述 WebView(网络视图)内置WebKit引擎,能加载显示网页,还支持JS,并且能够在Android平台使用AJAXWebView可以在布局中声明,也可以在Activit ...
- 【ZT】修复iCloud中查找我的iPhone、查找我的iPad无法显示地图的方法
http://blog.sina.com.cn/s/blog_4ff28d30010118cm.html 进入C:\Windows\System32\drivers\etc在hosts文件里加入如下地 ...
- [010]转+修正---C++的贪吃蛇程序(未用面向对象封装)
在网上看到一段贪吃蛇程序,自己心痒下了下来又稍微做了一点修改. 没有用面向对象的方式来进行封装,下次准备试试. 需要在windows环境下进行编译 #include<iostream> # ...
- scrollLeft、offsetLeft、clientLeft、clientHeight详解
offsetLeft:Html元素相对于自己的offsetParent元素的位置 scrollLeft:返回和设置当前横向滚动务的坐标值 scrollLeft.offsetLeft.clientLef ...
- javascript笔记04：let语句 和 yield语句 和 with语句
1.yield语句: <script type="application/javascript; version=1.7"> function generator() ...
- Listview实现分页下载
分析: * 1.初始控件,展示第一页数据 * 2.设置触发条件 * 1.设置滚动监听 * 2.判断是否在底部 * 3.判断是否停止滚动 * 4.更改网络请求参数为下一页 * 5.异步网络请求 * 6. ...
- 关于Ajax的实现
AJAX:Asynchronous Javascript And XML.异步的JavaScript和XML. 同步请求: 异步请求: 1.1.1 XMLHttpRequest对象的介绍: 方法 ...
- centos 7 下modelsim10.2c安装教程
step1: chmod +x ./install.linux(但是没有任何反应,原因是install.linux是32位程序,系统是64位的,所以要安装相应的库){ yum install glib ...