目录

           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. cdll和windll的差别

    Python要想调用C语言写的动态连接库.不仅要兼容C接口的调用习惯,还须要兼容C语言的数据类型.幸运的是ctypes库已经做了这双方面的工作.以便调用动态连接库是很方便的.在Hello World的 ...

  2. php throw new Excpetion()之后，程序还往下继续运行吗？

    经过测试是不会往下执行的,直接catch抛出异常了.

  3. 关于android的Activity的四种启动模式

    最近做项目遇到一个问题,当触摸屏幕的时候通过intent启动activity,发现会启动多次,而后查阅资料,发现,原来是activity的模式设置问题. Activity的启动模式可以通过Androi ...

  4. 让DataGridView显示行号

          http://www.cnblogs.com/JuneZhang/archive/2011/11/21/2257630.html 为了表示行号,我们可以在DataGridView的RowP ...

  5. kettle參数、变量具体解说

    kettle參数.变量具体解说 kettle 3.2 曾经的版本号里仅仅有 variable 和 argument,kettle 3.2 中.又引入了 parameter 概念.variable 即e ...

  6. HttpWebRequest 模拟登录响应点击事件（分享自己用的HttpHelper类）

    平时也经常采集网站数据,也做模拟登录,但一般都是html控件POST到页面登录:还没有遇到用户服务器控件button按钮点击事件登录的,今天像往常一样POST传递参数,但怎么都能登录不了:最后发现还有 ...

  7. iOS-MVVM设计模式

    谈到MVVM不得不先说一下MVC,MVC(Model-View-Controller). Model模型:用来呈现数据. View视图:用来呈现用户界面. Controller控制器:用来调节模型与视 ...

  8. Oracle建表实例

    建表一般来说是个挺简单的事情,但是Oracle的建表语句有很多可选的参数,有些我们可能平时不太用,用的时候又不知道怎么用,这里就写一个较完整的建表的例子: CREATE TABLE banping  ...

  9. Fedora 19修改主机名

    Distribution为Fedora 19 方式一(重启后失效,需root权限): hostname 新主机名 [root@promote hadoop]# hostname promote.cac ...

  10. css模块化思想（一）--------命名是个技术活

    引子: 女孩子都喜欢买衣服,而我也不例外,奈何钱包太瘦,买不起高大上的定制,只能买撞衫率极高的休闲衣,不过对于我来说,我还是开心的,毕竟买衣服买的不仅是衣服,更是一种心情.在web前端的世界里,css ...