2.GSAP（TweenMax手册/TweenLite手册）之一

最新推荐文章于 2024-05-07 09:00:00 发布

Trojan_loading

最新推荐文章于 2024-05-07 09:00:00 发布

阅读量2.9k

点赞数

分类专栏：动画库文章标签： javascript css

原文链接：https://www.tweenmax.com.cn/

版权

动画库专栏收录该内容

3 篇文章 2 订阅

订阅专栏

GSAP（TweenMax手册/TweenLite手册）之一

本文章内容是关于GSAP动画库中的TweenMax和TweenLite的使用，编写于2020年10月22日00时47分（v1.0.0）。

前言

TweenLite/TweenMax是GreenSock 动画平台中的核心动画工具，可用来构建补间动画(tween)。补间是flash时代的专业词汇，意思是在起始状态和终点状态之间补全中间过程。虽然现在我们使用动画这个词，但是其本质是不变的，仍然要包含四个要素：动画目标（target）、起始状态、终点状态、补间效果。例如将一个div从opacity:1经过5秒钟降低至opacity:0

TweenLite.fromTo('div', 5, {opacity:1}, {opacity:0});
//动画目标：div
//起始状态：opacity:1
//终点状态：opacity:0
//补间：5秒完成状态改变

起点状态经常可以省略，例如div以当前位置为起点，向右移动300px：

TweenLite.to('div', 5, {x:300});

例子中使用的CSS属性动画（opacity、x等）需要CSSPlugin插件支持，此插件包含在TweenMax.min.js中。如果你使用TweenLite.min.js，需另外加载CSSPlugin.min.js。

TweenMax手册章节划分

01节：动画结构
关于设置动画目标和起始、终点状态的动画的结构化方法可参看。

02节：动画初始设置
如果想要对动画进行一些初始化设置，如重复次数(repeat)缓动方式(ease)等可参看。

03节：动画事件中介绍了动画的事件函数，如开始事件(onStart)、结束事件(onComplete)、返回事件(onReverseComplete)等。

04节：动画播放组件
常用的动画控制组件，如播放（play）、暂停（pause）、重新播放（restart）等。

05节：动画属性调整
列出了你可以获取到的动画属性以及调整他们的方法，如动画时长（time）、播放进度（progress）。

06节：实例属性
介绍了TweenLite/TweenMax实例的属性设置，如设置选择器、读取时间轴等。

07节：实例方法
介绍了TweenLite/TweenMax实例的函数方法，如删除动画、动画渲染。

TweenLite和TweenMax区别

API文档大部分以TweenMax为例。如果你使用的是简约版的TweenLite，把TweenMax改为TweenLite即可。
例如.to() 方法是公用的

TweenMax.to(obj, 1, {x:100});
TweenLite.to(obj, 1, {x:100});

已经在API上面标明了哪些方法是公用的，哪些是TweenMax独有的，下面是一个简要的列表

TweenLite 和TweenMax 共有方法
delay()
delayedCall()
duration()
eventCallback
from()
fromTo()
getTweensOf()
invalidate()
isActive()
kill()
killDelayedCallsTo()
killTweensOf()
pause()
paused()
play()
progress()
restart()
resume()
reverse()
reversed()
seek()
set()
startTime()
time()
timeScale()
to()
totalDuration()
totalProgress()
totalTime()

TweenMax 独有方法
getAllTweens()
isTweening()
killAll()
killChildTweensOf()
pauseAll()
repeat()
repeatDelay()
resumeAll()
staggerFrom()
staggerFromTo()
staggerTo()
updateTo()
yoyo()

TweenMax手册/TweenLite手册术语说明

GSAP GreenSock Animation Platform/GreenSock 动画平台
delayedCalls 延迟执行函数
eventCallback 事件回调函数
tween 动画/补间动画
starting value 起点属性
current values 当前属性
destination values/ending values 终点属性
stagger 错开
ease 时间曲线/速度曲线
timeline 时间轴
TweenLite/TweenMax 动画实例
TimelineLite/TimelineMax 时间轴实例
label 标记/标签
obj/target 动画目标/动画对象
kill 删除/清除/杀死

一、动画结构

TweenMax()

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

TweenMax的构造函数，用来构建一个TweenMax对象。
如果使用TweenLite则是TweenLite();

TweenMax()适用于TweenMaxTweenLite

TweenMax()的参数

参数名类型是否必填描述
target object 是需要缓动的对象
duration number 是动画持续时间，一般是秒
vars object 是动画参数

TweenMax()效果展示

new TweenMax('.box', 3, {
    x: 500,
    alpha : 0.3,
});

/*还可通过function关键词返回变化值
TweenMax.to(".box", 1, {
  x: function() {
    return Math.random() * 300;
  }
});
*/

TweenMax()的补充说明

例子中改变CSS（x: 500, alpha : 0.3）

如果加载的是TweenLite.min.js，则还需要加载CSS插件plugins/CSSPlugin.min.js才能进行css动画。

TweenMax.to()

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

此方法用于创建一个从当前属性到指定目标属性的TweenMax动画对象。
以下几种方式效果相同。

TweenMax.to(obj, 1, {x:100});
var myTween = new TweenMax(obj, 1, {x:100})
var myTween = TweenMax.to(obj, 1, {x:100});

对多个目标进行动画

TweenMax.to([obj1, obj2, obj3], 1, {x:100});

TweenMax.to()适用于TweenMaxTweenLite

TweenMax.to()的参数

参数名类型是否必填描述
target object 是需要动画的对象
duration number 是动画持续时间，一般是秒
vars object 是动画参数（CSS属性、延迟、重复次数等）

TweenMax.to()效果展示

var myTween = TweenMax.to(".box", 1, {
  x: function(index, target) {
    console.log(index, target);
    return (index + 1) * 100 // 100, 200, 300
  }
})

TweenMax.to()的补充说明

以上例子对三个元素进行动画，分别向X轴方向运动100px、200px、300px

TweenMax.from()

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

通过设置动画起始点来初始化一个TweenMax，相当于动画从设置点开始。

TweenMax.from(mc, 1.5, {opacity:0, delay:2});

多个目标的动画

TweenMax.from([mc1, mc2, mc3], 1.5, {opacity:0});

TweenMax.from()适用于TweenMaxTweenLite

TweenMax.from()的参数

参数名类型是否必填描述
target object 是需要动画的对象
duration number 是动画持续时间，一般是秒
vars object 是设置动画的一些属性及其他参数

TweenMax.from()效果展示

var myTween = TweenMax.from(".box", 3, {
  x: 500,
})

TweenMax.fromTo()

TweenMax.fromTo( target:Object, duration:Number, fromVars:Object, toVars:Object ) : TweenMax

通过设置动画起始点和结束点来初始化一个TweenMax，相当于动画从设置点到第二个设置点。

TweenMax.fromTo([element1, element2], 1, {x:200}, {x:500});

TweenMax.fromTo()适用于TweenMaxTweenLite

TweenMax.fromTo()的参数

参数名类型是否必填描述
target object 是需要动画的对象
duration number 是动画持续时间，一般是秒
fromVars object 是起始点动画参数
toVars object 是结束点动画参数

TweenMax.fromTo()效果展示

var myTween=TweenMax.fromTo('.box', 3, {x: 200,},{x: 500,});
//从200到500

TweenMax.fromTo()的补充说明

例子中的元素从200px移动到500px

TweenMax.staggerTo()

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

stagger系列方法为多个目标制作一个有间隔的动画序列，相当于多个TweenMax的数组。
需要设置每个动画的开始间隔。如不设置则为零，同时开始动画。

var objects = [obj1, obj2, obj3, obj4, obj5];
TweenMax.staggerTo(objects, 1, {y:"+=150", opacity:0}, 0.2);

TweenMax.staggerTo()适用于TweenMax

TweenMax.staggerTo()的参数

参数名类型是否必填描述
targets Array 是要进行动画的对象，可以有多个，以数组形式传入
duration number 是动画持续的秒数（或帧数，如果设置了useFrames:true）
vars object 是设置动画的一些属性及其他参数
stagger Number 否每个动画的起始间隔，默认是0
onCompleteAll Function 否当所有显示对象都完成动画后要调用的函数
onCompleteAllParams Array 否 onCompleteAll函数的参数，以数组形式传入
onCompleteAllScope 否 onCompleteAll函数的作用域，this

TweenMax.staggerTo()效果展示

TweenMax.staggerTo(".box", 2, { rotation: 360, y: 300 }, 0.2, this.doSomething, ["aString"], this);

doSomething: function (param) {
  console.log(param);
}

TweenMax.staggerTo()的补充说明

stagger系列方法可用于TweenMax、TimelineLite、TimelineMax，不可用于TweenLite。
由于stagger系列方法（staggerTo、staggerFrom、staggerFromTo）返回的是一个tween的数组，所以不可以直接对其返回值直接使用tween的属性和方法。

tween=TweenMax.to(...)
tween.play()//播放动画

tween=TweenMax.staggerTo(...)
tween.play()//无法使用

stagger系列方法可以使用cycle属性来循环设置动画参数值。

TweenMax.staggerFrom()

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

通过设定序列动画的终点来初始化一组TweenMax。

var objects = [obj1, obj2, obj3, obj4, obj5];
TweenMax.staggerFrom(objects, 1, {y:"+=150"}, 0.2);

TweenMax.staggerFrom()适用于TweenMax

TweenMax.staggerFrom()的参数

参数名类型是否必填描述
targets Array 是要进行动画的对象，可以有多个，以数组形式传入
duration number 是动画持续的秒数（或帧数，如果设置了useFrames:true）
vars object 是设置动画的一些属性及其他参数
stagger Number 否每个动画的间隔，默认是0
onCompleteAll Function 否当所有显示对象都完成动画后要调用的函数
onCompleteAllParams Array 否传递给onCompleteAll函数的参数，以数组形式传入
onCompleteAllScope 否 onCompleteAll函数的作用域

TweenMax.staggerFrom()效果展示

TweenMax.staggerFrom(".box", 1, {
  cycle:{
    //an array of values
    backgroundColor:["red", "white", "#00f"],
    //function that returns a value
    y:function(index){
      return index * 20;
    }
  }
}, 0.5);

/* The cycle property is available in:

TweenMax.staggerFromTo()
TweenMax.staggerFrom()
TweenMax.staggerTo()
TimelineLite.staggerFromTo()
TimelineLite.staggerFrom()
TimelineLite.staggerTo()
TimelineMax.staggerFromTo()
TimelineMax.staggerFrom()
TimelineMax.staggerTo()

*/

TweenMax.staggerFrom()的补充说明

stagger系列方法可以使用cycle属性来循环设置动画参数值。

TweenMax.staggerFromTo()

TweenMax.staggerFromTo( targets:Array, duration:Number, fromVars:Object, toVars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) : Array

通过设定序列动画的起点和终点来初始化一个TweenMax。

var objects = [obj1, obj2, obj3, obj4, obj5];
TweenMax.staggerFromTo(objects, 1, {opacity:1}, {opacity:0}, 0.2);

TweenMax.staggerFromTo()适用于TweenMax

TweenMax.staggerFromTo()的参数

参数名类型是否必填描述
targets Array 是要进行动画的对象，可以有多个，以数组形式传入
duration number 是动画持续的秒数（或帧数，如果设置了useFrames:true）
fromVars object 是设置动画的一些属性及其他参数
toVars object 是设置动画的一些属性及其他参数
stagger Number 否每个动画的间隔，默认是0
onCompleteAll Function 否当所有显示对象都完成动画后要调用的函数
onCompleteAllParams Array 否传递给onCompleteAll函数的参数，以数组形式传入
onCompleteAllScope 否 onCompleteAll函数的作用域

TweenMax.staggerFromTo()效果展示

TweenMax.staggerFromTo(".box", 1, {
  cycle:{
    //an array of values
    backgroundColor:["red", "white", "#00f"],
    //function that returns a value
    y:function(index){
      return index * 10;
    }
  }
}, 
{
  cycle:{
    //an array of values
    backgroundColor:["green", "orange", "pink"],
    //function that returns a value
    y:function(){
      return (Math.random() * 100) + 20;
    }
  }
}, 0.5);

TweenMax.delayedCall()

TweenMax.delayedCall( delay:Number, callback:Function, params:Array, scope:*, useFrames:Boolean ) : TweenMax

提供一种在设定的时间（或帧）后调用函数的简单方法。

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

TweenMax.delayedCall()适用于TweenMaxTweenLite

TweenMax.delayedCall()的参数

参数名类型是否必填描述
delay Number 是要延迟的秒数（或帧数，如果设置了useFrames:true）
callback Function 是要延迟执行的函数
params Array 否传递给onComplete函数的参数，以数组形式传入
scope * 否函数的作用域，this的指向，默认为空
useFrames Boolean 否设定延迟的时间模式是基于秒数还是帧数，默认false：秒

TweenMax.delayedCall()效果展示

var myTween=new TweenMax('.box', 3, {
    x: 500,
})
var myTween2=TweenMax.delayedCall(2,myFunction,["参数1","参数2"])
function myFunction(param1, param2) {
   alert("延迟2秒输出"+param1+'和'+param2);
}

TweenMax.set()

TweenMax.set( target:Object, vars:Object ) : TweenMax

立即设置目标的属性值而不产生过渡动画，相当于0的动画时间。
返回TweenMax对象。

//以下两个设置作用相同
TweenMax.set(myObject, {x:100});
TweenMax.to(myObject, 0, {x:100});

TweenMax.set()适用于TweenMaxTweenLite

TweenMax.set()的参数

参数名类型是否必填描述
target object 是需要移动的对象
vars object 是动画参数

TweenMax.set()效果展示

TweenMax.set(".nbox",{transformPerspective:300});
//或者设置父级元素，使其全部子元素产生3D效果 TweenMax.set(".wrapper",{perspective:200});
TweenMax.to(".box", 3, {rotationY:360, transformOrigin:"left top"})

TweenMax.set()的补充说明

为一个数组设置属性

TweenMax.set([obj1, obj2, obj3], {x:100, y:50, opacity:0});

3D效果
在平时的动效开发中，为了使动效具有立体的效果，一般会用到CSS3中的3D transform这一属性。在TweenMax中也提供了3D transform功能，支持CSS3D的全部属性，使用起来比CSS3更加方便。
perspective和transformPerspective两个属性。它们是TweenMax中运行的基础，使用它们才能使元素具有一个3D空间透视的表现能力。

transformPerspective是针对单个元素使用的，而perspective则是使用在父级元素上，使用它会使该父级元素下的子元素具有3D空间透视的一个展现形式。
只需要在父级使用perspective的方法，可以同时使它的子元素都具有3D的展现。

transformOrigin
transformOrigin是用来设置元素在做transform位移变换时的原点的。默认值是元素的中心点即(“50%,50%”)。transformOrigin有三个值(x,y,z)，z值是一个可选项。

可以使用"top", “left”, “right”,或者是"bottom"值亦或是百分值(比如bottom right可以设置为 "100% 100%)。

二、动画初始设置

delay

delay:Number

动画开始之前的延迟秒数（以帧为单位时则为帧数）。

delay适用于TweenMaxTweenLite

delay效果展示

new TweenMax('.box', 3, {
    x: 500,
    delay: 3
});

time={score:3}
TweenMax.to(time, 3, {
    score: 0,
    ease: Power0.easeNone,
    onUpdate:function(){
        document.querySelector(".box").innerHTML=Math.ceil(time.score);
    }
});

ease

ease: Ease (or Function or String)

过渡效果的速度曲线（缓动效果）。你可以在动画的参数中设置各种缓动来控制动画的变化率，赋予其特定的“感觉”。例如Elastic.easeOut或 Strong.easeInOut。默认是Power1.easeOut。

new TweenMax('.box', 3, {
    x: 500,
    ease: Bounce.easeOut
});

TweenLite中包含了基本缓动：Power0、Power1、Power2、Power3、Power4、Linear、Quad、Cubic、Quart、Quint、Strong，他们每个都含有.easeIn、.easeOut、.easeInOut参数（对于线性动画，请使用Power0.easeNone）。
而TweenMax在此基础上还另外增加了特殊缓动：Elastic、Back、Bounce、SlowMo、SteppedEase、RoughEase、Circ、Expo、Sine。
如果想在TweenLite中使用特殊缓动则需要加载缓动类easing/EasePack.min.js 。

ease适用于TweenMaxTweenLite

ease效果展示

new TweenMax('.box', 3, {
    x: 500,
    ease: Bounce.easeOut
});

ease的补充说明

此外，缓动效果还可以像Jquery那样写，easeOutStrong 等同于Strong.easeOut 。

在TweenMax2.0中，Power0取代了Linear，Power1取代了Quad，Power2取代了Cubic，Power3取代了Quart，Power4取代了Quint/Strong。

Back还可设定强度，如ease: Back.easeOut.config(1.7)
Elastic还可设定强度，如ease: Elastic.easeOut.config(1, 0.3)
SlowMo还可设定强度，如ease: SlowMo.ease.config(0.7, 0.7, false)
SteppedEase还可设定阶数，如ease: SteppedEase.config(12)
RoughEase还需要设定其他参数

paused

paused: Boolean

如果设置为true，动画将在创建时立即暂停。默认false

paused适用于TweenMaxTweenLite

paused效果展示

tween = new TweenMax('.box', 3, {
    x: 500,
    paused: true
});

playBtn = document.getElementById("playBtn")
playBtn.onclick = function() {
    tween.play();
}

immediateRender

immediateRender:Boolean

立即渲染，默认false。

一般来说，TweenMax的运动对象会在下一个渲染周期前(也就是下一帧)被渲染到场景中，除非你设置了delay。如果想强制立即渲染，可以把这个参数设为true。
另外from()方法的运动对象是立即渲染的（默认true），如果你不想该运动对象被渲染，可以把这个参数设为false。

immediateRender适用于TweenMaxTweenLite

immediateRender效果展示

TweenMax.from('.green', 3, {
    x: 500,
    delay:3,
});
TweenMax.from('.orange', 3, {
    x: 500,
    delay:3,
    immediateRender: false,
});

overwrite

overwrite: String (or int)

用来控制同一个对象上有多个动画时的覆盖之类的情况。

TweenMax.to('.box', 6, {x: 700,y:100,});
TweenMax.to('.box', 3, {x: 200,overwrite:"none"});
//或者
TweenMax.to('.box', 3, {x: 200,overwrite:0});

有以下6种模式，以上例来说明：

overwrite适用于TweenMaxTweenLite

overwrite的参数

模式模式代码说明效果
0 "none"或者false 不做任何处理前三秒运行x: 200,y:100
后三秒运行x: 700,y:100
1 "all"或者true 覆盖所有只运行x: 200
2 “auto” 仅覆盖重复的属性
默认模式前三秒运行x: 200,y:100
后三秒运行y:100
3 “concurrent” 同时发生跟模式1很相似，不同是它只覆盖掉正在运行的动画属性。而放过其他的没有启动的动画属性。
4 “allOnStart” 开始时覆盖跟模式1非常像。两点不同是他是在动画属性第一次渲染时才覆盖掉其他所有的动画属性，而且这个会把在他之后创建的动画属性也覆盖掉。
5 “preexisting” 在动画属性第一次渲染时才覆盖掉其他所有的动画属性。

overwrite效果展示

TweenMax.to('.box', 6, {x: 700,y:100,});
TweenMax.to('.box', 3, {x: 200,overwrite:2});

useFrames

useFrames: Boolean

当设置为true时，对这个TweenMax对象的时间计算方式基于帧而不是秒，一般帧速约为16.66ms（60帧/秒）。

useFrames适用于TweenMaxTweenLite

TweenMax.to(obj, 100, {x:500,useFrames:true,});

useFrames效果展示

TweenMax.ticker.fps(10);
myTween=TweenMax.to('.box', 100, {x:500,useFrames:true,});

useFrames的补充说明

一个动画的时间模式通常是由其父时间轴决定。可通过TweenMax.ticker.fps(10);设置帧速。帧速不能超过60

lazy

lazy: Boolean

延迟渲染
当动画第一次渲染并读取其起始值时，将默认自动“延迟渲染”该特定瞬间，这意味着它将尝试延迟渲染（写入值）直到最后时间点。这可以提高性能，因为它避免了某些浏览器所做的读/写/读/写布局颠簸。
如果要为特定补间禁用延迟渲染，可以进行设置lazy:false。或者由于零持续时间的补间默认情况下不进行延迟渲染，因此您可以通过设置lazy:true等方式为其提供延迟渲染的权限TweenLite.set(element, {opacity:0, lazy:true});。
在大多数情况下，你不会需要设置lazy。

TweenLite.set(element, {opacity:0, lazy:true});

lazy适用于TweenMaxTweenLite

autoCSS

autoCSS: Boolean

自动识别CSS属性，省略css:{}包装器。默认true。

当你为DOM元素添加css属性动画时，需要使用CSSPlugin。通常你需要在一个css:{}对象中包装css相关属性，例如TweenLite.to(element, 2, {css:{left:“200px”, top:“100px”}, ease:Linear.easeNone}); 。

但是css属性动画经常会用到，因此TweenMax在内部实现了一些逻辑简便了这种写法，允许你省略 css:{} 包装器。上面的补间可以重写为 TweenLite.to(element, 2, {left:“200px”, top:“100px”, ease:Linear.easeNone});。

也就是说，autoCSS为开启状态时

x: 500, alpha : 0.3,

等同于

css:{
    x: 500,
    alpha : 0.3,
}

要阻止TweenMax自动为你创建css包装器，只需设置autoCSS:false 即可。不过这很少会用到，但如果你怀疑TweenMax将某些属性解释为与css无关的属性，请尝试设置autoCSS:false或手动定义你自己的css:{}对象。

autoCSS适用于TweenMaxTweenLite

TweenMax.to(obj, 100, {x:500,useFrames:true,});

autoCSS效果展示

//未开启autoCSS时
TweenMax.to('.box', 3, {
    autoCSS:false,   
    css:{
        x: 500,
        alpha : 0.3,
    }
});

autoCSS的补充说明

TweenMax自身带有CSSPlugin，而TweenLite需要另外加载文件CSSPlugin.min.js才可以使用CSS动画。

callbackScope

callbackScope: Object

用于所有回调的范围（onStart，onUpdate，onComplete等）。范围是“this”在任何回调中引用的内容。旧的回调特定范围属性（onStartScope，onUpdateScope，onCompleteScope，onReverseComplete等）已弃用但仍然有效。

callbackScope适用于TweenMaxTweenLite

repeat

repeat: Number

动画在第一次完成后应重复的次数。例如，如果repeat为1，则动画将总共播放两次（初始播放加1次重复）。要无限期重复，请使用-1。repeat应该始终是一个整数。

repeat适用于TweenMax

repeat效果展示

new TweenMax('.box', 3, {
    x: 500,
    repeat: 3,//动画将进行4次
});

repeatDelay

repeatDelay: Number

每次重复之间的秒数（或帧）。例如，如果repeat是2并且repeatDelay是1，则动画将首先播放，然后在重复之前等待1秒，然后再次播放，然后再等待1秒再进行最后的重复。

repeatDelay: 1

repeatDelay适用于TweenMax

repeatDelay效果展示

new TweenMax('.box', 3, {
    x: 500,
    repeat: 2,
    repeatDelay: 1,
});

yoyo

yoyo: Boolean

如果设置yoyo为true，那么重复的动画将往返进行。默认为false。
例如当你设置了repeat:2，如果没设置yoyo，那么动画是这样的123-123-123
如果设置了yoyo，动画则是123-321-123

new TweenMax('.box', 3, {
    x: 500,
    repeat:-1,
    yoyo:true,
});

yoyo适用于TweenMax

yoyo效果展示

new TweenMax('.box', 3, {
    x: 500,
    repeat:-1,
    yoyo:true,
});

yoyoEase

yoyoEase: Ease | Boolean

定义动画返回时，缓动效果如何，默认false，返回时的缓动效果按照前进时的反转。
例如，动画前行效果ease:Power1.easeOut，回转时则变成是ease:Power1.easeIn。如果设置为true，回转时则与前进相同，为ease:Power1.easeOut。
也可以设置为特定的ease效果，例如Power2.easeOut。

yoyoEase适用于TweenMax

yoyoEase效果展示

new TweenMax('.green', 3, {
    x: 500,
    repeat: -1,
    ease: Bounce.easeOut,
    yoyo: true,
});
new TweenMax('.orange', 3, {
    x: 500,
    repeat: -1,
    ease: Bounce.easeOut,
    yoyo: true,
    yoyoEase: true,
});

startAt

startAt: Object

设置动画属性开始时的值

TweenMax.to(mc, 2, {x:500, startAt:{x:200}});

startAt适用于TweenMax

startAt效果展示

new TweenMax('.box', 3, {
    x: 500,
    startAt: {x:200},//从200开始
});

cycle

cycle: Object

在stagger（错开）动画中设定属性组。虽然stagger限定了动画目标使用相同的属性（如x:100, rotation:90），但你可以使用cycle来设定一个属性组（如 cycle:{x:[100,-100], rotation:[30,60,90]} ），还可使用function关键词（如 {x:function() { return Math.random() * 200; }} ）
cycle适用于 staggerTo() 、 staggerFrom() 和 staggerFromTo() 。

//cycle适用于 
TweenMax.staggerFromTo() 
TweenMax.staggerFrom() 
TweenMax.staggerTo() 
TimelineLite.staggerFromTo() 
TimelineLite.staggerFrom() 
TimelineLite.staggerTo() 
TimelineMax.staggerFromTo() 
TimelineMax.staggerFrom() 
TimelineMax.staggerTo()

cycle适用于TweenMax

cycle效果展示

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

cycle的补充说明

function关键词接受两个参数：
参数类型必填说明
index int 否排序动画的索引值
target object 否目标元素

三、动画事件

onComplete

onComplete: Function

在动画结束时触发此回调函数。

TweenMax.to('.box', 2, {
    x: 500,
    onComplete:function(){
        ...
    }
});

onComplete适用于TweenMaxTweenLite

onComplete效果展示

panel= document.getElementById("panel");
TweenMax.to('.box', 2, {
    x: 500,
    repeat: 1,
    yoyo:true,
    onComplete:function(){
        panel.innerHTML='动画完成了';
    }
});

onCompleteParams

onCompleteParams: Array

传递给onComplete函数的参数数组，例如

TweenLite.to(element, 1, {
    left:"100px", 
    onComplete:myFunction, 
    onCompleteParams:[element, "param2"]
});

如果想传递动画对象本身，可以使用{self}

onCompleteParams:["{self}", "param2"]

onCompleteParams适用于TweenMaxTweenLite

onCompleteParams效果展示

panel= document.getElementById("panel");
new TweenMax('.box', 3, {
    x: 500,
    onComplete:myFunction,
    onCompleteParams:["{self}", "param2 value"],
});
function myFunction(param1,param2){
    console.log(param1);
    panel.innerHTML=param2;
}

onCompleteScope

onCompleteScope: Object

定义onComplete函数的作用域，即函数内this的指向。

TweenMax.to(mc, 1, {
    x:100,
    onCompleteScope:object,
});

onCompleteScope适用于TweenMaxTweenLite

onReverseComplete

onReverseComplete: Function

反向播放动画完成时执行此回调函数。

TweenMax.to('.box', 3, {
    x: 500,
    onReverseComplete:function(){
        ...
    }
});

onReverseComplete适用于TweenMaxTweenLite

onReverseComplete效果展示

var tween = new TweenMax('.box', 3, {
    x: 500,
    onReverseComplete:function(){
        panel.innerHTML='返回完毕';
    }
});
panel= document.getElementById("panel");
reverseBtn = document.getElementById("reverseBtn");
reverseBtn.onclick = function() {
    tween.reverse();
}

onReverseComplete的补充说明

yoyo返回原点时不会触发onReverseComplete，因为yoyo只是把repeat反了个方向。

onReverseCompleteParams

onReverseCompleteParams: Array

传递给onReverseComplete函数的参数数组，例如

TweenLite.to(element, 1, {
    left:"100px", 
    onReverseComplete:myFunction, 
    onReverseCompleteParams:[element, "param2"]
});

如果想传递动画对象本身，可以使用{self}

onReverseCompleteParams:["{self}", "param2"]

onReverseCompleteParams适用于TweenMaxTweenLite

onReverseCompleteParams效果展示

panel= document.getElementById("panel");
var tween = new TweenMax('.box', 3, {
    x: 500,
    onReverseComplete:myFunction,
    onReverseCompleteParams:["{self}", "param2 value"],
});
function myFunction(param1,param2){
    console.log(param1);
    panel.innerHTML=param2;
}
reverseBtn = document.getElementById("reverseBtn");
reverseBtn.onclick = function() {
    tween.reverse();
}

onReverseCompleteScope

onReverseCompleteScope: Object

定义onReverseComplete函数的作用域，即函数内this的指向。

TweenMax.to(mc, 1, {
    x:100,
    onReverseCompleteScope:object,
});

onReverseCompleteScope适用于TweenMaxTweenLite

onStart

onStart: Function

当动画开始渲染时执行此事件函数，有可能会被执行多次，因为动画是可以重复开始的。

TweenMax.to('.box', 2, {
    x: 500,
    onStart:function(){
        ...
    }
});

onStart适用于TweenMaxTweenLite

onStart效果展示

panel= document.getElementById("panel");
i=1;
tween=TweenMax.to('.box', 2, {
    x: 500,
    delay: 2,
    onStart:function(){
        panel.innerHTML='动画开始了'+i;
        i++;
    }
});
restartBtn = document.getElementById("restartBtn"),
restartBtn.onclick = function() {tween.restart();}

onStartParams

onStartParams: Array

传递给onStart事件函数的参数数组，例如

TweenMax.to(mc, 1, {
    x:100, 
    onStart:myFunction, 
    onStartParams:[mc, "param2"]
});

如果想传递动画对象本身，可以使用{self}

onStartParams:["{self}", "param2"]

onStartParams适用于TweenMaxTweenLite

onStartParams效果展示

panel= document.getElementById("panel");
tween=TweenMax.to('.box', 2, {
    x: 500,
    delay: 2,
    onStart:myFunction,
    onStartParams:["{self}", "param2 value"],
});
function myFunction(param1,param2){
    console.log(param1);
    panel.innerHTML='动画开始了，参数2是'+param2;
}

onStartScope

onStartScope: Object

定义onStart函数的作用域，即函数内this的指向。

TweenMax.to(mc, 1, {
    x:100,
    onStartScope:object,
});

onStartScope适用于TweenMaxTweenLite

onUpdate

onUpdate: Function

当动画发生改变时(动画进行中的每一帧)不停的触发此事件。

TweenMax.to('.box', 3, {
    x: 500,
    onUpdate:function(){
        ...
    }
});

onUpdate适用于TweenMaxTweenLite

onUpdate效果展示

var timeView = document.getElementById("time");
new TweenMax('.box', 3, {
    x: 500,
    onUpdate:function(){
        timeView.innerHTML=this.time().toFixed(2);
    }
});

onUpdate的补充说明

delay时不会触发，repeatDelay时会触发。

onUpdateParams

onUpdateParams: Array

传递给onUpdate事件函数的参数数组，例如

TweenMax.to(mc, 1, {
    x:100, 
    onUpdate:myFunction, 
    onUpdateParams:[mc, "param2"]
});

如果想传递动画对象本身，可以使用{self}

onUpdateParams:["{self}", "param2"]

onUpdateParams适用于TweenMaxTweenLite

onUpdateScope

onUpdateScope: Object

定义onUpdate函数的作用域，即函数内this的指向。

TweenMax.to(mc, 1, {
    x:100,
    onUpdateScope:object,
});

onUpdateScope适用于TweenMaxTweenLite

onOverwrite

onOverwrite: Function

当一个补间动画被另外一个补间动画覆盖时发生的事件。

onOverwrite:function(overwrittenTween,overwritingTween,target,overwrittenProperties){
...
}

onOverwrite适用于TweenMaxTweenLite

onOverwrite的参数

onOverwrite可以传递以下参数。

参数类型说明
overwrittenTween Tween 被覆盖的补间动画
overwritingTween Tween 覆盖的补间动画
target Object 动画目标（只有"auto"模式才会传递此参数），与overwrittenTween.target类似
例如：TweenLite.to([obj1, obj2], 1, {x:100}) 和 TweenLite.to(obj2, 1, {x:50}), 目标应是 obj2
overwrittenProperties Array 一个属性数组，包含了被覆盖的动画属性（只有"auto"模式才会传递此参数），
例如：[“x”,“y”,“opacity”]

onOverwrite效果展示

var myTween = TweenMax.to([".green",".orange"], 3, {
    x: 300,
    alpha: 0.2,
    onOverwrite:myFunction
})
var myTween2 = TweenMax.to([".orange",".grey"], 5, {
    x: 500,
    y: 100,
})

function myFunction(overwrittenTween,overwritingTween,target,overwrittenProperties){
    console.log(overwrittenTween);
    console.log(overwritingTween);
    console.log(target);
    console.log(overwrittenProperties);
}

onRepeat

onRepeat: Function

在每次动画重复时(repeat)执行此事件函数。

TweenMax.to('.box', 2, {
    x: 500,
    repeat:1,
    onRepeat:function(){
        ...
    }
});

onRepeat适用于TweenMax

onRepeat效果展示

TweenMax.killAll();
var num = document.getElementById("num");
count = 1;

var tween = new TweenMax('.box', 3, {
    x: 500,
    repeat: -1,
    yoyo: true,
    onRepeat: function(){
        num.innerHTML=count;
        count++; 
    },
});

onRepeatParams

onRepeatParams: Array

传递给onRepeat事件函数的参数数组，例如

TweenMax.to(mc, 1, {
    x:100, 
    onRepeat:myFunction, 
    onRepeatParams:[mc, "param2"]
});

如果想传递动画对象本身，可以使用{self}

onRepeatParams:["{self}", "param2"]

onRepeatParams适用于TweenMax

onRepeatParams效果展示

TweenMax.killAll();
var num = document.getElementById("num");
count = 1;

new TweenMax('.box', 3, {
    x: 500,
    repeat: -1,
    yoyo: true,
    onRepeatParams:["{self}", "param2"],
    onRepeat:myFunction,
});
function myFunction(param1,param2){
        num.innerHTML=count;
        console.log(param1);
        count++; 
    }

onRepeatScope

onRepeatScope: Object

定义onRepeat函数的作用域，即函数内this的指向。

TweenMax.to(mc, 1, {
    x:100,
    onRepeatScope:object,
});

onRepeatScope适用于TweenMax

.eventCallback()

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

获取或者设置事件，例如"onComplete", “onUpdate”, “onStart”, “onReverseComplete” , “onRepeat” (onRepeat 只应用在 TweenMax 或者 TimelineMax 实例)，以及应传递给该回调的任何参数。

以下两个设置方式等效

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

每个动画实例的每个回调类型只能有一个(一个onComplete, 一个onUpdate, 一个onStart, 等等)，新建则会覆盖掉之前的。
可以通过设置null来删除掉回调函数

myAnimation.eventCallback("onUpdate", null);

返回值：省略除第一个参数之外的所有参数则返回当前值（getter），而定义多于第一个参数则设置回调（setter）并返回实例本身以便于链式执行。以下是链式执行的例子：

myAnimation.eventCallback("onComplete", completeHandler).eventCallback("onUpdate", updateHandler, ["param1","{self}"]).play(1);

.eventCallback()适用于TweenMaxTweenLite

.eventCallback()的参数

参数名类型必填说明
type String 是事件回调的类型，如 “onComplete”, “onUpdate”, “onStart” 或 “onRepeat”。这是区分大小写的。
callback Function 否事件发生时应调用的函数，default = null
params Array 否传递回调的参数数组。用 “{self}” 指动画实例本身。例： [“param1”,"{self}"]，default = null
scope 否回调调用的范围（基本上代表函数中"this"指的是什么），default = null

总结

提示

Trojan_loading

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
2.GSAP（TweenMax手册/TweenLite手册）之一

GSAP（TweenMax手册/TweenLite手册）本文章内容是关于GSAP动画库中的TweenMax和TweenLite的使用，编写于2020年10月22日00时47分（v1.0.0）。前言TweenLite/TweenMax是GreenSock 动画平台中的核心动画工具，可用来构建补间动画(tween)。补间是flash时代的专业词汇，意思是在起始状态和终点状态之间补全中间过程。虽然现在我们使用动画这个词，但是其本质是不变的，仍然要包含四个要素：动画目标（target）、起始状态、终点状态、
复制链接

扫一扫