TweenMax动画库学习(一)
目录
之前在做HTML5移动端开发的时候,用的都是Animate.css,这个插件封装的的确很好,但是在做一些缓动方面的动画,它也有一定的不足之处,比如手要写一个连续的动画,需要不停的去重复写函数,使得代码严重的冗余,再比如要获取动画执行的时间,就比较的麻烦等等。而TweenMax恰恰可以解决这方面的不足。于是我花了3天的时间,认真的学习了TweenMax动画库的用法,现在将个人的学习总结如下,若有不正确的地方,欢迎读者给与批评指正!
TweenMax动画库的官方网址: http://greensock.com/timelinemax
下面我们直奔主题,开始介绍TweenMax动画库:
1、如何引用TweenMax动画库
TweenMax动画库依赖jQuery
<script src="./../js/jquery-2.1.4.min.js"></script>
<script src="./../js/TweenMax.js"></script>
2、得到动画的示例
<script>
$(function () {
var t = new TimelineMax();
});
</script>
3、to():添加动画
参数说明:
t.to("元素选择器或对象",持续时间,对象,【可选】动画延迟发生时间可写数字,"-=0.5","+=0.5")
1. 元素选择器或对象
2. 持续时间
3. 对象
变化的属性->值
4. 【可选】动画延迟发生时间
可写数字,“-=0.5”,“+=0.5“
页面简单布局
<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>
执行单个动画
<script>
$(function(){
var t =new TimelineMax();
t.to("#div1",1,{left:300},1);
});
</script>
执行组合动画
<script>
$(function(){
var t =new TimelineMax();
t.to("#div1",1,{left:300,width:300},1);
});
</script>
执行队列动画,列表中的动画会依次执行
<script>
t.to("#div1", 1, { left: 300 });
t.to("#div1", 1, { width: 300 });
t.to("#div1", 1, { height: 300 });
t.to("#div1", 1, { top: 300 });
t.to("#div1", 1, { rotationZ: 180 });
t.to("#div1", 1, { opacity: 0 });
</script>
添加第四个参数 设置动画的延迟时间
<script>
//动画延迟一秒执行
t.to("#div1", 1, { left: 300, width: 300 }, 1);
//第二条动画没有延迟时间,所以等第一条动画执行完成后立刻执行第二条动画
t.to("#div1", 1, { width: 300 });
</script>
<script>
//动画延迟一秒执行
t.to("#div1", 1, { left: 300, width: 300 }, 1);
//第二条动画也是延迟一秒执行,会和第一条动画同时延迟一秒执行
t.to("#div1", 1, { width: 300 }, 1);
</script>
延迟执行第二条动画
<script>
//动画延迟一秒执行
t.to("#div1", 1, { left: 300, width: 300 }, 1);
//实现第一条动画完成后,延迟一秒,执行第二条动画
t.to("#div1", 1, { width: 300 }, 3);
</script>
延迟执行第二条动画(便捷写法)
<script>
//动画延迟一秒执行
t.to("#div1", 1, { left: 300, width: 300 }, 1);
t.to("#div1", 1, { width: 300 }, "+=1");
</script>
让第二条动画指令立刻执行
<script>
//动画延迟一秒执行
t.to("#div1", 1, { left: 300, width: 300 }, 1);
//第四个参数设0后,动画会立刻执行
t.to("#div1", 1, { width: 300 }, 0);
</script>
动画的停止与播放
通过play()方法与stop()方法来控制
<!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>
// stop():停止动画
// play():开始动画
$(function(){
var t =new TimelineMax();
// t.to("元素选择器或对象",持续时间,对象,【可选】动画延迟发生时间可写数字,"-=0.5","+=0.5")
t.to("#div1",1,{left:300},1);
t.to("#div1",2,{width:300},"+=1");
t.to("#div1",2,{height:300},"+=1");
t.to("#div1",2,{top:600});
t.to("#div1",2,{rotationZ:180});
t.to("#div1",2,{opacity:0});
t.stop(); //停止动画
$("#play").click(function(){
t.play();//播放动画
});
$("#stop").click(function(){
t.stop();//停止动画
});
});
</script>
</head>
<body>
<input type="button" id="play" value="播放"/>
<input type="button" id="stop" value="停止"/>
<div id="div1"></div>
</body>
</html>
反向执行动画
通过reverse()方法让动画反向执行
<!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>
// reverse():反向开始动画
$(function(){
var t =new TimelineMax();
// t.to("元素选择器或对象",持续时间,对象,【可选】动画延迟发生时间可写数字,"-=0.5","+=0.5")
t.to("#div1",1,{left:300},1);
t.to("#div1",2,{width:300},"+=1");
t.to("#div1",2,{height:300},"+=1");
t.to("#div1",2,{top:600});
t.to("#div1",2,{rotationZ:180});
t.to("#div1",2,{opacity:0});
t.stop(); //停止动画
$("#play").click(function(){
t.play();//播放动画
});
$("#stop").click(function(){
t.stop();//停止动画
});
$("#reverse").click(function(){
t.reverse();//反向执行动画
});
});
</script>
</head>
<body>
<input type="button" id="play" value="播放"/>
<input type="button" id="stop" value="停止"/>
<input type="button" id="reverse" value="反向动画"/>
<div id="div1"></div>
</body>
</html>
<!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>
// stop():停止动画
// play():开始动画
// reverse():反向开始动画
// onComplete():运动结束后触发对应的函数
// onReverseComplete():反向运动结束后触发对应的函数
$(function(){
var t =new TimelineMax();
// t.to("元素选择器或对象",持续时间,对象,【可选】动画延迟发生时间可写数字,"-=0.5","+=0.5")
t.to("#div1",1,{left:300,onComplete:function(){
alert("left:300");
},onReverseComplete(){
alert("left:0");
}},1);
t.to("#div1",2,{width:300,onComplete:function(){
alert("width:300")
},onReverseComplete(){
alert("width:100");
}},"+=1");
t.to("#div1",2,{height:300},"+=1");
t.to("#div1",2,{top:600});
t.to("#div1",2,{rotationZ:180});
t.to("#div1",2,{opacity:0});
t.stop(); //停止动画
$("#play").click(function(){
t.play();//播放动画
});
$("#stop").click(function(){
t.stop();//停止动画
});
$("#reverse").click(function(){
t.reverse();//反向执行动画
});
});
</script>
</head>
<body>
<input type="button" id="play" value="播放"/>
<input type="button" id="stop" value="停止"/>
<input type="button" id="reverse" value="反向动画"/>
<div id="div1"></div>
</body>
</html>
动画演示:
代码打包下载:
链接: http://pan.baidu.com/s/1nvaoe5V 密码: gm7y
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时代一直发展到今天的专 ...
随机推荐
- u检验、t检验、F检验、X2检验 (转)
http://blog.renren.com/share/223170925/14708690013 常用显著性检验 1.t检验 适用于计量资料.正态分布.方差具有齐性的两组间小样本比较.包括配对资料 ...
- java_java 利用JAX-RS快速开发RESTful 服务
JAX-RS(Java API for RESTful Web Services)同样也是JSR的一部分,详细规范定义见 https://jcp.org/en/jsr/detail?id=311 .从 ...
- mmc线性0-1规划问题
本题目来自物理学苑,原作者认为mmc不容易解决0-1规划. 5个人选4个,组队游泳接力比赛,最好成绩组队. 其实,mmc解决此类问题,还是很方便,轻松的. 下面是原题目的求解:
- 修改范围PHP_INI_SYSTEM与PHP_INI_ALL的区别
PHP_INI_USER 可在用户脚本(例如 ini_set() )或 Windows 注册表(自 PHP 5.3 起)以及 .user.ini 中设定 PHP_INI_PERDIR 可在 php.i ...
- Samba服务详解
Samba文件服务器 本章结构 服务简介 SMB协议 Server Message Block,服务消息块 CIFS协议 Common Internet File System,通用互联网文件系统 S ...
- FragmentTabHost切换Fragment时避免重复加载UI
使用FragmentTabHost时,Fragment之间切换时每次都会调用onCreateView方法,导致每次Fragment的布局都重绘,无法保持Fragment原有状态. 解决办法:在Frag ...
- 通过Bresenham算法实现完成矢量线性多边形向栅格数据的转化
1.实验目的与要求 目的:通过本次实验,完成矢量线性多边形向栅格数据的转化过程: 要求:采用VC++6.0实现. 2.实验方法 采用Bresenham算法实现 3.实验材料 直线的定义:y = x/3 ...
- 封装SqliteHelper类--Sqlite数据库
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...
- Web前端学习笔记1
Day1. 1.Windows常用快捷键. 快捷键 功能 ctrl+c 复制 ctrl+v 粘贴 ctrl+x 剪切(复制和剪切后都可以粘贴) ctrl+a 全选 ctrl+s 保存 ctrl+tab ...
- CSS3秘笈第三版涵盖HTML5学习笔记9~12章
第9章,装饰网站导航 限制访问,处于隐私方面考虑,浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了.其中包括对已访问过的链接定义color.background-color.borde ...