目录

           TweenMax动画库学习(一)

           TweenMax动画库学习(二)

           TweenMax动画库学习(三)

           TweenMax动画库学习(四)

           TweenMax动画库学习(五)  

           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>
     onComplete():运动结束后触发对应的函数
 
     onReverseComplete():反向运动结束后触发对应的函数
 
 <!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动画库学习(一)的更多相关文章

  1. TweenMax动画库学习(六)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  2. TweenMax动画库学习(五)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  3. TweenMax动画库学习(四)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  4. TweenMax动画库学习(二)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  5. TweenMax动画库学习(三)

    目录               TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)           ...

  6. TweenMax动画库学习

    之前在做HTML5移动端开发的时候,用的都是Animate.css,这个插件封装的的确很好,但是在做一些缓动方面的动画,它也有一定的不足之处,比如手要写一个连续的动画,需要不停的去重复写函数,使得代码 ...

  7. animate.css –齐全的CSS3动画库--- 学习笔记

    animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...

  8. TweenMax 动画库,知识点

    官方地址:https://greensock.com/tweenmax github 地址:https://github.com/greensock/GreenSock-JS 比较好的介绍文章: ht ...

  9. TweenMax的GSAP(GreenSock动画平台)GSAP,专业的Web动画库

    很好奇红框框里面的内容是什么,于是点了进去,又百度了下这个英文缩写具体指的什么东西. GSAP的全名是GreenSock Animation Platform,是一个从flash时代一直发展到今天的专 ...

随机推荐

  1. u检验、t检验、F检验、X2检验 (转)

    http://blog.renren.com/share/223170925/14708690013 常用显著性检验 1.t检验 适用于计量资料.正态分布.方差具有齐性的两组间小样本比较.包括配对资料 ...

  2. java_java 利用JAX-RS快速开发RESTful 服务

    JAX-RS(Java API for RESTful Web Services)同样也是JSR的一部分,详细规范定义见 https://jcp.org/en/jsr/detail?id=311 .从 ...

  3. mmc线性0-1规划问题

    本题目来自物理学苑,原作者认为mmc不容易解决0-1规划. 5个人选4个,组队游泳接力比赛,最好成绩组队. 其实,mmc解决此类问题,还是很方便,轻松的. 下面是原题目的求解:

  4. 修改范围PHP_INI_SYSTEM与PHP_INI_ALL的区别

    PHP_INI_USER 可在用户脚本(例如 ini_set() )或 Windows 注册表(自 PHP 5.3 起)以及 .user.ini 中设定 PHP_INI_PERDIR 可在 php.i ...

  5. Samba服务详解

    Samba文件服务器 本章结构 服务简介 SMB协议 Server Message Block,服务消息块 CIFS协议 Common Internet File System,通用互联网文件系统 S ...

  6. FragmentTabHost切换Fragment时避免重复加载UI

    使用FragmentTabHost时,Fragment之间切换时每次都会调用onCreateView方法,导致每次Fragment的布局都重绘,无法保持Fragment原有状态. 解决办法:在Frag ...

  7. 通过Bresenham算法实现完成矢量线性多边形向栅格数据的转化

    1.实验目的与要求 目的:通过本次实验,完成矢量线性多边形向栅格数据的转化过程: 要求:采用VC++6.0实现. 2.实验方法 采用Bresenham算法实现 3.实验材料 直线的定义:y = x/3 ...

  8. 封装SqliteHelper类--Sqlite数据库

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  9. Web前端学习笔记1

    Day1. 1.Windows常用快捷键. 快捷键 功能 ctrl+c 复制 ctrl+v 粘贴 ctrl+x 剪切(复制和剪切后都可以粘贴) ctrl+a 全选 ctrl+s 保存 ctrl+tab ...

  10. CSS3秘笈第三版涵盖HTML5学习笔记9~12章

    第9章,装饰网站导航 限制访问,处于隐私方面考虑,浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了.其中包括对已访问过的链接定义color.background-color.borde ...