目录

           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. 用HTML5 Canvas 做擦除及扩散效果

    2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

  2. android学习日记06--View视图

    一.android 界面开发 1.三个重要的类:View视图.Canvas画布.Paint画笔2.android 界面开发常用三种视图 View            --只能在主线程中更新,没有缓存 ...

  3. Java ZIP File Example---refernce

    In this tutorial we are going to see how to ZIP a file in Java. ZIP is an archive file format that e ...

  4. web前端开发前景怎么样？

    对于web前端开发,对现今前端的发展,中国的发展还很落后,中国没有Jquery,没有Node.js,其中最主要的一点是,中国的前端比较封锁,大家都没有分享的觉悟.回头看看,那些发展比较快的行业.软件, ...

  5. handlebar helper帮助方法

    handlebars相对来讲算一个轻量级.高性能的模板引擎,因其简单.直观.不污染HTML的特性.另一方面,handlebars作为一个logicless的模板,不支持特别复杂的表达式.语句,只内置了 ...

  6. posix thread条件变量

    概述 等待条件变量总是返回锁住的互斥量. 条件变量的作用是发送信号,而不是互斥. 与条件变量相关的共享数据是“谓词”,如队列满或队列空条件. 一个条件变量应该与一个谓词相关.如果一个条件变量与多个谓词 ...

  7. 关于Eclipse插件开发(一)

    plugin.xml是插件和Eclipse内核的接口,Eclipse就像一所大宅子.它的外墙(plugin.xml)有很多门(扩展点), 要熟练进入这座大宅子,就得先搞清楚它有那些门(扩展点). 插件 ...

  8. 268条PCB Layout设计规范

    1 PCB布线与布局 PCB布线与布局隔离准则:强弱电流隔离.大小电压隔离,高低频率隔离.输入输出隔离.数字模拟隔离.输en入输出隔离,分界标准为相差一个数量级.隔离方法包括:空间远离.地线隔开. 2 ...

  9. 在 Transact-SQL 中使用 TRY...CATCH

    在 Transact-SQL 中使用 TRY...CATCH (注:本文来自于 http://msdn.microsoft.com/zh-cn/library/ms179296.aspx)       ...

  10. 编辑一个小的smarty类

    首先先建立两个文件夹,一个temp,存储编译前的文件,一个comp,存储编译后的文件,编译前的文件使用{$title}代替<?php echo $title; ?>,然后将前者编译成后者再 ...