目录

           TweenMax动画库学习(一)

           TweenMax动画库学习(二)

           TweenMax动画库学习(三)

           TweenMax动画库学习(四)

           TweenMax动画库学习(五)  

           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动画库学习(二)的更多相关文章

  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. [AngularJS + cryptoJS + Gravatar] Provider vs factory

    Configurable Bits Need a Provider We want to be able to configure the characterLength before Tweetab ...

  2. nginx学习七 高级数据结构之动态数组ngx_array_t

    1 ngx_array_t结构 ngx_array_t是nginx内部使用的数组结构.nginx的数组结构在存储上与大家认知的C语言内置的数组有相似性.比方实际上存储数据的区域也是一大块连续的内存. ...

  3. 详解C中volatile关键字

    volatile提醒编译器它后面所定义的变量随时都有可能改变,因此编译后的程序每次需要存储或读取这个变量的时候,都会直接从变量地址中读取数据.如果没有volatile关键字,则编译器可能优化读取和存储 ...

  4. 实例源码--Android通讯录源码

      下载源码   技术要点: 1.通讯录联 系人的管理 2.接听.打电话 3.发短信 4. 源码带详细的 中文注释    ...... 详细介绍: 1.通讯录联系人的管理 播放器具有播放本地音乐的功能 ...

  5. ajax检查用户名

    Ajax实现的效果 究竟Ajax能实现什么功能呢?今天下午学习了一下Ajax,现在跟大家分享一下我的学习心得.Ajax是什么?工作机制又是什么?可能不大准确,只是我个人看了视频学习后的一点点看法. A ...

  6. iOS 图片加载框架－ SDWebImage 解读

    在iOS的图片加载框架中,SDWebImage可谓是占据大半壁江山.它支持从网络中下载且缓存图片,并设置图片到对应的UIImageView控件或者UIButton控件.在项目中使用SDWebImage ...

  7. IOS中如何显示带有html标签的富文本

    NSString *strHTML = @"<p>你好</p><p>        这是一个例子,请显示</p><p>外加一个ta ...

  8. 2013 ACM/ICPC 长沙现场赛 C题 - Collision （ZOJ 3728）

    Collision Time Limit: 2 Seconds      Memory Limit: 65536 KB      Special Judge There's a round medal ...

  9. sql server 表变量、表类型、临时表

    sql server 中临时表分为会话临时表和永久临时表.会话临时表在会话结束后自动被删除,永久临时表与基本表的使用上基本无差异,需要显示调用drop将其删除. 创建临时表 创建会话临时表 creat ...

  10. HTTP层 —— 中间件

    1.简介 HTTP 中间件为过滤进入应用的 HTTP 请求提供了一套便利的机制.例如,Laravel 内置了一个中间件来验证用户是否经过授权,如果用户没有经过授权,中间件会将用户重定向到登录页面,否则 ...