TweenMax动画库学习(二)

上一节我们主要聊了TweenMax动画库中的to()：添加动画、play()播放动画、stop()停止动画、reverse()反向执行动画、onComplete()：运动结束后触发对应的函数、 onReverseComplete()：反向运动结束后触发对应的函数等方法的使用，接下来我们继续学习TweenMax动画库中的其它方法的使用。

TweenMax动画库的官方网址: http://greensock.com/timelinemax

下面我们直奔主题，开始介绍TweenMax动画库中的其它方法的使用：

1、页面布局

<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>

2、add()---添加状态

参数说明：

 字符串或一个函数

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时代一直发展到今天的专 ...

随机推荐

【WPF】打开本地的文件或者文件夹
问题描述: 我做的程序中需要添加帮助文档,我将文档生成了CHM格式,在用户点击帮助按钮时候弹出帮助文档. 实现方法: System.Diagnostics.Process.Start(AppDoma ...
KeyTweak 键盘按键功能修改
最近一致再用ThinkPad S3,悲剧的是上翻页和下翻页竟然和方向键在一起,经常按错光标不知道去哪里了. 实在忍受不了,竟然有这样的软件,哈哈. KeyTweak,用起来太方便了
HDU 5475 An easy problem 线段树
An easy problem Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pi ...
Unescape HTML entities in Javascript Unescape HTML转成html代码
前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createElement('div'); 然后再给obj设置一些属性. 但是,在实际使用过程 ...
《RESTful Web Services》第四章设计URI
引言 URI是跨越Web的资源描述符,一个URI由以下内容组成——协议.主机.端口号.路径
Overview & Change Log
Overview & Change Log Nova Framework is a PHP 5.5+ MVC Framework. It's designed to be lightweigh ...
PHP代码安全学习笔记V1.0
PHP代码安全学习笔记V1.0http://www.docin.com/p-778369487.html
posix thread概述
1. 基本概念一个Unix进程可以理解为一个线程加上地址空间.文件描述符和其他数据.异步表明事情相互独立发生, 除非有强加的依赖性. 并发指实际可能是穿行发生的事情好像同时发生一样.并行指并发序列同 ...
使用DS18B20设计温控系统
datasheet真的是得看看啊,比如DS18B20,不然程序都不好写,美国DALLAS半导体公司推出的数字化温度传感器DS18B20采用单总线协议,即与单片机接口仅需要一个IO口,无需任何外部原件, ...
job interview
一 , 7series clock 二, SDRAM comtroller (DDR) 4.熟悉DDR2/3协议或Ethernet相关协议,并有实际项目经验者优先: 三,AXI bus(AMBA) 四 ...

TweenMax动画库学习(二)

TweenMax动画库学习(二)的更多相关文章

随机推荐

热门专题