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

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' } })

TweenMax.js (一) TweenMax

Tweenmax

动画结构

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

TweenMax.from()

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

TweenMax.staggerTo()

TweenMax.staggerFrom()

TweenMax.staggerFromTo()

TweenMax.delayedCall()

TweenMax.set()

动画vars设置

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

动画实例事件

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

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

实例方法

一个3D旋转的案例

你可能感兴趣的:(TweenMax.js (一) TweenMax)