TweenMax动画库学习(二)

时间：2023-02-24 23:15:59

目录

           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>

动画演示：

TweenMax动画库学习(二)

  代码打包下载：

链接: http://pan.baidu.com/s/1dFrzxy5 密码: g9ww

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

  1. TweenMax动画库学习&lpar;六&rpar;

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

  2. TweenMax动画库学习&lpar;五&rpar;

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

  3. TweenMax动画库学习&lpar;四&rpar;

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

  4. TweenMax动画库学习&lpar;一&rpar;

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

  5. TweenMax动画库学习&lpar;三&rpar;

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

  6. TweenMax动画库学习

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

  7. animate&period;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. bootstrap（关于栅格布局）

    栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需 ...

  2. VBS使用Scripting&period;Dictionary字典对象

    Scripting.Dictionary是个很有用的组件,其创建了类似于Key索引对应Value值的字典对象,并且在其内部提供了快速索引访问的机制,可以让我们通过Key直接索引到指定的Value,比遍 ...

  3. 证书 pki

    对称加密         symmetric cryptographic 非对称加密     asymmetric cryptographic 密钥交换协议 key agreement/exchang ...

  4. HOWTO&colon; Create native-looking iPhone&sol;iPad applications from HTML&comma; CSS and JavaScript

    HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript Though it's not ...

  5. 关于python多线程编程中join&lpar;&rpar;和setDaemon&lpar;&rpar;的一点儿探究

    关于python多线程编程中join()和setDaemon()的用法,这两天我看网上的资料看得头晕脑涨也没看懂,干脆就做一个实验来看看吧. 首先是编写实验的基础代码,创建一个名为MyThread的  ...

  6. 为Dapper编写一个类似于EF的Map配置类

    引言 最近在用Dapper处理Sqlite.映射模型的时候不喜欢用Attribute配置,希望用类似EF的Map来配置,所以粗略的实现了一个. 实现 首先是主体的配置辅助类型: using Syste ...

  7. 20160405javaweb之jdbc

    一.数据库驱动的概念.JDBC 数据库厂商提供的用来操作数据库用的jar包就是数据库驱动.各个厂商如果提供各自的数据库驱动的话会导致开发人员学习成本太高,所以sun公司提供了一套数据库驱动应该遵循的接 ...

  8. Android 它们的定义View它BounceProgressBar

    转载请注明出处:http://blog.csdn.net/bbld_/article/details/41246247 [Rocko's blog] 之前几天下载了非常久没用了的桌面版酷狗来用用的时候 ...

  9. JavaSE基础问答

    1.JAVA的基本数据类型有哪些? JAVA的基本数据类型分为4类8种,就是整形 byte.short.int.long.浮点型 float 跟double,字符型 char,跟布尔型 true和 f ...

  10. 微信小程序字体设置

    微信小程序css篇----字体(Font) 一.字体:font.属性在一个声明中设置所有字体属性. 可设置的属性是(按顺序): "font-style font-variant font-w ...

相关文章