TweenMax中文初级教程一

2020-04-17 11:27:48


  • TweenMax.js集成了GreenSock动画平台的大部分核心功能,且具有极高的兼容性。

TweenMax.js包含有两个核心功能:TweenMax和TweenLineMax。

Tweenmax

可用来构建补间动画(tween)。补间是flash时代的专业词汇，意思是在起始状态和终点状态之间补全中间过程。

动画结构

TweenMax.to( target:Object, duration:Number, vars:Object )

  • target : 同jQuery选择器,也可为一个数组,甚至是一个普通对象(此时动画过程即对象属性的渐变过程)

  • duration : 一般为 秒

  • vars : 对象属性,如 left , x , opacity 等

  • TweenMax.to() 和 new TweenMax() 等价

      $('#obj')[0].score = 100;
      var myTween = TweenMax.to("#obj", 3, {
        left: function(index){
          return index*50+100
        },
        score: 5,
        onUpdate: function () {
          document.querySelector("#obj").innerHTML = $('#obj')[0].score;
        }
      }
      );
TweenMax.from()

  • 类似TweenMax.to(),但是动画会从目标起始点开始,返回原来位置

TweenMax.fromTo( target, duration, fromVars, toVars )

  • 动画从fromVars到toVars

TweenMax.staggerTo()

  • TweenMax.staggerTo( targets:Array, duration:Number, vars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* )

  • 注意onCompleteAll等参数不属于vars对象，而是并列的参数

TweenMax.staggerFrom()
TweenMax.staggerFromTo()

  • 为多个目标制作一个有间隔的动画序列，相当于多个TweenMax的数组

  • cycle属性可以分别指定每一个目标的动画属性(通过传入数组 或 function的return)

TweenMax.delayedCall()

  • 类似setTimeout()

//1秒后执行myFunction并传递两个参数:TweenMax.delayedCall(1, myFunction, ["value1" , "value2"],document);function myFunction(param1, param2) {
    console.log(param1+param2+this)//this指向document}
TweenMax.set()

  • 直接设置属性,相当于duration为0的动画

动画vars设置

  • transformOrigin:"bottom center" 旋转中心

  • delay:number 设置延时

  • paused: Boolean (false) 创建时是否暂停

  • overwrite: String or int ( "auto" ) 同一对象存在多个动画时的覆盖情况

    • true : 只运行后者(慎用，会导致TimeLine上的后续call被调用)

    • false : 同时运行,当同一时刻前后者都存在某属性时,以后者为准

    • auto : 同时运行,当前后者都存在某属性时,忽略前者该属性

  • useFrames: Boolean (false) 为true时采用帧而非秒

  • repeat: Number (0) 动画 额外 重复次数,为-1则无限期重复。

  • repeatDelay: Number (0) 每次重复的间隔

  • yoyo: Boolean (false) 重复时是否往返进行

  • yoyoEase: Ease | Boolean (false) 动画返回时的缓动效果，默认返回时的缓动效果按照前进时的反转。

  • startAt: Object 设置动画开始时的值 例TweenMax.to(mc, 2, {x:500, startAt:{x:200}});

  • callbackScope: Object 指定onStart，onUpdate，onComplete等回调中“this”的指向。

  • autoCSS: Boolean 允许省略css:{}包装器。默认true。

  • timeScale: 改变目标TweenMax或TweenLineMax实例的速度(其实只是target为对象时的一个特殊运用)
    例 : TweenMax.to(tween1, 10, { timeScale: 0 }); //将tween1动画逐渐减速

  • ease: Ease (or Function or String) 速度曲线

    • 默认是Power1.easeOut

    • 基本缓动 Power0、Power1、Power2、Power3、Power4、Linear、Quad、Cubic、Quart、Quint、Strong，他们每个都含有.easeIn、.easeOut、.easeInOut参数（对于线性动画，请使用Power0.easeNone）

    • Elastic、Back、Bounce、SlowMo、SteppedEase、RoughEase、Circ、Expo、Sine

  • cycle: Object 仅适用于stagger（错开）动画，以为不同目标设置不同属性值，还可使用function关键词。

myTween = TweenMax.staggerTo(".box", 1, {
    cycle: {
        //为目标循环设置一下属性数组
        backgroundColor: ["red", "white", "#00f"],
        //通过function返回属性数组
        y: function(index, target) {
            console.log(index, target)
            //目标target < div class = "box" > < /div>
                        // 目标数组的动画索引值index
            return index * 20;
        },
    },}, 0.5);

  • roundProps: Object
    动画过程中将目标属性四舍五入（舍入）,即动画效果会以跳跃方式播放

TweenLite.to(element, 5, { x:600, y:100, roundProps:{    
    x:100, //将x舍入到最接近100的增量    y:0.1  //将y舍入到最接近0.1的增量  }});

动画事件 (每个事件均有XParams和XScope)

  • onComplete: Function 动画结束时触发

  • onCompleteParams: Array 传递给onComplete的参数数组

  • onCompleteScope: Object 定义onComplete的this指向

  • onReverseComplete: Function 反向动画结束时触发

  • onStart: Function 动画 start/restart 时触发

  • onUpdate: Function 每一帧都会不停触发

  • onOverwrite: Function

  • onRepeat: Function

  • .eventCallback( type:String, callback:Function, params:Array, scope:* )

    • 直接对动画实例设置事件,可链式执行

    • 相同type的事件会覆盖,也可将事件设为null来清除原有事件

    • params可传入["{self}"]表示动画实例本身

var myTween = new TweenLite(mc, 1, {x:100});myTween.eventCallback("onComplete", myFunction, ["param1"]);

动画实例事件

  • .play( from:*, suppressEvents:Boolean ) 正向播放

    • from 播放开始时间点,默认为当前位置

    • suppressEvents (true) 若为false,则被跳过时间段内的回调/事件也会触发

  • .pause( atTime:*, suppressEvents:Boolean ) 暂停

    • atTime (null) 跳转到特定事件再暂停

  • .paused( value:Boolean ) 获取或设置暂停状态,无入参时即为获取

  • .restart( includeDelay:Boolean, suppressEvents:Boolean ) 重新开始

    • includeDelay (false) 是否包含延迟(如果有)

  • .resume( from:*, suppressEvents:Boolean ) 按当前方向恢复播放

  • .reverse( from:*, suppressEvents:Boolean ) 反向播放

  • .reversed( value:Boolean ) 获取或设置反转状态,无入参时即为获取

  • .seek( time:*, suppressEvents:Boolean ) 不改变状态（播放、暂停、方向）的情况下直接跳转到某个时间点。

  • .timeScale( value:Number ) 获取或设置动画速率,默认为1

动画属性调整(无入参时为获取)

  • .duration( value:Number ) 单次动画持续的时间

  • .totalDuration( value:Number ) 全部重复动画加重复间隔的持续时间

  • .time( value:Number ) 当前动画已用时间

  • .totalTime( time:Number, suppressEvents:Boolean ) 全部重复动画加重复间隔的总时间

  • .progress( value:Number, suppressEvents:Boolean ) 进程0~1

  • .totalProgress( value:Number, suppressEvents:Boolean ) 总进程0~1

  • .delay( value:Number )

  • .invalidate() 刷新开始/结束值,此时如再restart()会以当前位置作为新的开始点

  • .isActive() 判断是否在播放中

  • .startTime( value:Number ) / .endTime( value:Number )

  • .repeat( value:Number ) 第一次完成后的重复次数

  • .repeatDelay( value:Number )

  • .yoyo( value:Boolean )

实例属性(除data和ticker外均仅用于获取数据)

如myTween.data={data1:'value1'}

  • data 用于储存信息

  • target 动画对象

  • timeline 父级时间轴对象

  • vars 构造器配置对象

  • ticker 每当引擎update时这个对象将分配tick事件

//设置帧率,最高为60(默认)TweenMax.ticker.fps(30); //添加监听TweenMax.ticker.addEventListener("tick", myFunction);function myFunction() {//核心引擎update时处理这个事件}//移除监听TweenMax.ticker.removeEventListener("tick", myFunction);

实例方法

  • TweenMax.getTweensOf( target:Object, onlyActive:Boolean )获取目标上所有动画对象的数组

  • TweenMax.getAllTweens( includeTimelines:Boolean ) 获取所有动画实例的数组

  • .kill( vars:Object, target:Object ) 消灭整个动画或部分参数。

//删除动画myAnimation.kill(); //删除动画的x和y属性myAnimation.kill({x:true, y:true});//删除对象"myObject"上的动画，如果动画有多个对象，其他对象上的动画不会删除myAnimation.kill(null, myObject); //仅删除对象"myObject"的动画的x和y属性myAnimation.kill({x:true, y:true}, myObject);//仅删除对象"myObject1"和"myObject2"对象的"opacity"属性myAnimation.kill({opacity:true}, [myObject1, myObject2]);

  • TweenMax.killDelayedCallsTo( function:Function ) 移除延迟函数

  • TweenMax.killTweensOf( target:Object, vars:Object ) 移除目标所有动画

  • TweenMax.killAll(complete, tweens, delayedCalls, timelines) 全部删除

  • TweenMax.killChildTweensOf( parent:Object, complete:Boolean )删除目标子元素动画

  • TweenMax.globalTimeScale( value:Number ) 读取或设置所有动画全局播放速率

  • TweenMax.pauseAll( tweens, delayedCalls, timelines ) 全部暂停

  • TweenMax.resumeAll( tweens, delayedCalls, timelines )全部恢复

一个3D旋转的案例

TweenMax.set("img", { css: { transformPerspective: 400, transformStyle: "preserve-3d" } });
TweenMax.to("img", 1, { ease: Power0.easeNone, css:  { rotationY: 360, rotationX: -360, rotationZ: 180, z: 300, top: '-60vh' } })



  • 精彩推荐

  • 2020-02-16 16:17:15

    CocoaPods安装和使用教程

    当你开发iOS应用时，会经常使用到很多第三方开源类库，比如JSONKit，AFNetWorking等等。可能某个类库又用到其他类库，所以要使用它，必须得另外下载其他类库，而其他类库又用到其他类库，“子子孙孙无穷尽也”，这也许是比较特殊的情况。总之小编的意思就是，手动一个个去下载所需类库十分麻烦。另外一种常见情况是，你项目中用到的类库有更新，你必须得重新下载新版本，重新加入到项目中，十分麻烦。如果能有什么工具能解决这些恼人的问题，那将“善莫大焉”。所以，你需要 CocoaPods。

  • 2020-02-16 17:13:34

    iOS优秀Objective-C开源库集锦

    自己从事iOS开发工作接近两年左右的时间了，在自己工作之余，收集整理了一些优秀的三方开源框架，自己整理的这些三方开源库涵盖了iOS开发面很多方面的知识。非常感谢这些开源库的作者们，正是因为这些库，提高了我们的开发效率，同样也是我们学习进步的源泉。现将这个整理工程文件分享出来，希望能给需要的朋友一些帮助，同时也自己也做下收集记录。

  • 2020-02-19 23:04:52

    理解Laravel中的pipeline

    pipeline在laravel的启动过程中出现次数很多，要了解laravel的启动过程和生命周期，理解pipeline就是其中的一个关键点。网上对pipeline的讲解很少，所以我自己写一写吧。

  • 2020-02-19 23:08:56

    Laravel 用户认证 Auth（精华）

    很多应用是需要登陆后才能操作，Laravel 提供了一个 auth 工具来实现用户的认证功能。并且有一个 config/auth.php 来配置 auth 工具。大概看一下 auth 工具的常用方法