TweenMax动画库学习
之前在做HTML5移动端开发的时候，用的都是Animate.css,这个插件封装的的确很好，但是在做一些缓动方面的动画，它也有一定的不足之处，比如手要写一个连续的动画，需要不停的去重复写函数，使得代码严重的冗余，再比如要获取动画执行的时间，就比较的麻烦等等。而TweenMax恰恰可以解决这方面的不足。于是我认真的学习了TweenMax动画库的用法，现在将个人的学习总结如下，若有不正确的地方，欢迎读者给与批评指正！
TweenMax动画库的官方网址: http://greensock.com/timelinemax
下面我们直奔主题，开始介绍TweenMax动画库：
1、如何引用TweenMax动画库
TweenMax动画库依赖jQuery
1 <script src="./../js/jquery-2.1.4.min.js"></script>
2 <script src="./../js/TweenMax.js"></script>
2、得到动画的示例
1 <script>
2 $(function () {
3 var t = new TimelineMax();
4 });
5 </script>
3、to()：添加动画
参数说明：
t.to("元素选择器或对象",持续时间,对象,【可选】动画延迟发生时间可写数字,"-=0.5","+=0.5")
1. 元素选择器或对象
2. 持续时间
3. 对象
变化的属性->值
4. 【可选】动画延迟发生时间
可写数字，“-=0.5”，“+=0.5“
页面简单布局
1 <style>
2 html,body{
3 margin: 0;
4 padding: 0;
5 }
6 #div1{
7 width:100px;
8 height:100px;
9 background: #8D121A;
10 position: absolute;
11 left:0;
12 top:100px;
13 }
14 </style>
1 <body>
2 <div id="div1"></div>
3 </body>
执行单个动画
1 <script>
2 $(function(){
3 var t =new TimelineMax();
4 t.to("#div1",1,{left:300},1);
5 });
6 </script>
执行组合动画
1 <script>
2 $(function(){
3 var t =new TimelineMax();
4 t.to("#div1",1,{left:300,width:300},1);
5 });
6 </script>
执行队列动画,列表中的动画会依次执行
1 <script>
2 t.to("#div1", 1, { left: 300 });
3 t.to("#div1", 1, { width: 300 });
4 t.to("#div1", 1, { height: 300 });
5 t.to("#div1", 1, { top: 300 });
6 t.to("#div1", 1, { rotationZ: 180 });
7 t.to("#div1", 1, { opacity: 0 });
8 </script>
添加第四个参数 设置动画的延迟时间
1 <script>
2 //动画延迟一秒执行
3 t.to("#div1", 1, { left: 300, width: 300 }, 1);
4 //第二条动画没有延迟时间,所以等第一条动画执行完成后立刻执行第二条动画
5 t.to("#div1", 1, { width: 300 });
6 </script>
1 <script>
2 //动画延迟一秒执行
3 t.to("#div1", 1, { left: 300, width: 300 }, 1);
4 //第二条动画也是延迟一秒执行,会和第一条动画同时延迟一秒执行
5 t.to("#div1", 1, { width: 300 }, 1);
6 </script>
延迟执行第二条动画
1 <script>
2 //动画延迟一秒执行
3 t.to("#div1", 1, { left: 300, width: 300 }, 1);
4 //实现第一条动画完成后,延迟一秒,执行第二条动画
5 t.to("#div1", 1, { width: 300 }, 3);
6 </script>
延迟执行第二条动画(便捷写法)
1 <script>
2 //动画延迟一秒执行
3 t.to("#div1", 1, { left: 300, width: 300 }, 1);
4 t.to("#div1", 1, { width: 300 }, "+=1");
5 </script>
让第二条动画指令立刻执行
1 <script>
2 //动画延迟一秒执行
3 t.to("#div1", 1, { left: 300, width: 300 }, 1);
4 //第四个参数设0后,动画会立刻执行
5 t.to("#div1", 1, { width: 300 }, 0);
6 </script>
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动画库学习(三) Tw ...
- TweenMax动画库学习(三)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) ...
- 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时代一直发展到今天的专 ...
随机推荐
- SSH/HTTPS安全的本质都依赖于TLS/SSL
1.SSH/HTTPS的安全本质是TLS/SSL. 2.1990年互联网上的网页主要是静态内容,作为信息发布,使用HTTP明文传输是可以的.不过,后来很多公司开始使用网页进行金融交易,例如:股票,于是 ...
- Python装饰器，json,pickle
装饰器 定义:本质是函数,装饰其它函数是为了给其添加新功能: 原则:1.不能修改被装饰的函数的源代码 2.不能修改被装饰的函数的调用方式 实现装饰器知识储备: 1.函数即变量: 2.高阶函数 3.嵌套 ...
- Spring 笔记总结
1.Spring框架的核心是提供一个容器(BeanFactory 或 ApplicationContext),提供以下功能: 1)创建和销毁组件对象,类似"工厂类" 2)采用不同的 ...
- MyBatis 原始Dao开发方式
原始Dao开发方法需要程序员编写Dao接口和Dao实现类. 映射文件 <?xml version="1.0" encoding="UTF-8" ?> ...
- Node Sass could not find a binding for your current environment 解决办法
具体错误如下: 解决办法: 命令行执行 npm rebuild node-sass 命令(如果不行,则先运行npm install node-sass命令执行再执行 npm rebuild nod ...
- QQ顶部的消息，联系人切换
高仿ios SegmentView 以前做过的一个项目美工设计的页面包含这个控件,和QQ消息页面顶部的效果一样,其实,这个控件是ios7的分段控制,android没有这个控件,不过实现起来也比较简单, ...
- makefile学习笔记（一）
1.1:make概述 在linux环境下使用make工具能够比较容易的构建一个属于自己的工程,整个工程的编译只需要一个命令就可以完成编译.连接以至于最后的执行.不过我们需要投入一些时间去学习如何完成m ...
- 阿里巴巴Java开发手册思维导图
趁着有时间把阿里巴巴Java开发手册又看了一遍了,很多时候觉得看完之后,发现自己好像一点都不记得了里面的内容了.只能把大概内容画一遍在脑子里形成一张图方便记忆,这样就更能够记得自己的看完的内容了.其中 ...
- iOS之 Auto Layout
1. 动画 // 修改从 StoryBoard 绑定到类的约束的值 self.boxView.constant += 80 // 在动画闭包里对其父级进行 layoutIfNeeded() UIVie ...
- velocity的基础使用
velocity的基本使用要求:掌握jsp的jstl技术,因为velocity的用法和jstl非常相似.语法上差别不大,但是velocity的示例明显比jstl少,解释也少,所以使用velocity必 ...