GreenSock Animation Platform/GreenSock 动画平台

[WangShuXian6]

GreenSock

https://greensock.com/docs/NPMUsage

npm install gsap

---

https://www.tweenmax.com.cn TweenMax中文网（GreenSock动画平台,GSAP） 适用于移动端和现代互联网的超高性能专业级动画插件 TweenMax/GreenSock交流QQ群：701123570

---

默认使用ES模块（CommonJS / UMD仍然可用) 导入以下各个类

import TweenMax from "gsap/TweenMax";
import Draggable from "gsap/Draggable"; 

---

or TweenMax包含（并导出）许多常用类 （TweenMax包括TweenLite，TimelineLite，TimelineMax，CSSPlugin，RoundPropsPlugin，BezierPlugin，DirectionalRotationPlugin，AttrPlugin以及除CustomEase，CustomWiggle和CustomBounce之外的所有缓动）

import { TweenMax, TimelineLite, Power2, Elastic, CSSPlugin } from "gsap/TweenMax";

***
>or
>“全部”文件导入/导出每个GSAP工具（除了仅限成员的奖励插件）
```ts
import { TimelineMax, CSSPlugin, ScrollToPlugin, Draggable } from "gsap/all"; 

---

IMPORTANT: if your animations aren't working as expected, it's likely an issue with tree shaking (see below) which can be easily resolved by referencing any plugins you're using

像Webpack这样的一些捆绑器提供了一个称为“树摇动”的便捷功能，它试图识别您在代码中没有引用的模块，并将它们从捆绑中删除以减小文件大小。听起来不错，但是GSAP插件（如CSSPlugin）通常不会被用户直接引用，因此它们已经成熟，可以通过树摇动而不小心被拔掉。这可能会打破你的动画。解决方案？只需在代码中的某处引用插件

import { TimelineLite, CSSPlugin, AttrPlugin }  from "gsap/all";

//without this line, CSSPlugin and AttrPlugin may get dropped by your bundler...
//没有这一行，你的捆绑包可能会丢弃CSSPlugin和AttrPlugin
const plugins = [ CSSPlugin, AttrPlugin ];

var tl = new TimelineLite();
tl.to(".myClass", 1, {x:100, attr:{width:300}});

注意：为了最大化向后兼容性并避免树抖动问题，主TweenMax文件会自动激活历史上与之捆绑的所有类（如CSSPlugin，BezierPlugin，AttrPlugin等）。当然，这会相应地影响束大小。如果您只想提取基础TweenMax类（不自动激活其他类），则可以使用该TweenMaxBase文件（从2.0.0开始），如

//skips auto-activing the other plugins/classes
import { TweenMax } from "gsap/TweenMaxBase"; 

---

要让树摇动在Webpack中工作，您可能需要{modules:false}在babel配置文件中设置。以下是一些可能有用的链接：

https://webpack.js.org/guides/tree-shaking/ https://webpack.js.org/loaders/babel-loader/ https://rollupjs.org/guide/en#danger-zone

---

UMD/CommonJS

常规的旧ES5 UMD（通用模块定义）版本的文件几乎兼容所有（RequireJS，Browserify等）

//get the UMD versions. Notice the "/umd/" in the path...
import { TweenMax, Power2, TimelineLite } from "gsap/umd/TweenMax"; 
import ScrollToPlugin from "gsap/umd/ScrollToPlugin"; 
import Draggable from "gsap/umd/Draggable";

---

使用 MorphSVGPlugin 奖励插件，会员专用

显然我们不能通过NPM 分发仅限会员的奖励插件，所以您需要做的就是登录您的GreenSock帐户并下载最新的zip，其中包含“bonus-files-for-npm-users”文件夹，其中包含只是奖金插件/工具。然后你可以把它放到你的项目中，比如你的/ src /文件夹（或者任何地方），然后直接导入它们。例如，为了节省一些打字，您可以将“bonus-files-for-npm-users”重命名为“gsap-bonus”，并将其放在项目的根目录中，然后

import MorphSVGPlugin from "./gsap-bonus/MorphSVGPlugin";
import SplitText from "./gsap-bonus/SplitText";

---

cdn

<script src = “https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js” > </ script> 

---

为什么我不能从“gsap”导入任何类？ 因为历史上“gsap”指向TweenMax（在我们转移到ES模块之前）并且我们不想破坏现有项目或突然导致它们在构建系统中变得更大，而这些构建系统没有利用树摇动。我们非常重视向后兼容性。但是当我们迁移到3.0.0版本时

---

类型定义 我们没有任何官方的TypeScript定义文件（抱歉），但有两个可能符合您的需求：

@types/greensock 
或 
@types/gsap

如果您遇到任何问题，请联系这些回购的作者。

此外，在某些环境（对ES模块不友好的环境）中，最好以稍微不同的方式导入UMD文件，例如

import * as Draggable from "gsap/umd/Draggable";
import * as TweenMax from "gsap/umd/TweenMax";

---

路线图 我们计划从一开始就完全构建3.0.0版本的ES模块，并稍微改变组织。这是一项艰巨的任务，所以请耐心等待。版本3.0.0可能会降低IE8支持并简化操作以及更改一些架构部分。

[WangShuXian6]

TweenMax

greensock-js文件包是免费开源部分，包含有核心工具、过渡时间曲线、基本插件、拓展插件等。 此外，GreenSock还有一些商业插件。

下载免费greensock-js文件包和破解版商业插件 https://www.tweenmax.com.cn/source/

---

加载文件

<script src="js/greensock-js/TweenLite.min.js"> </script>  -- 核心工具，可初始化TweenLite对象
<script src="js/greensock-js/plugins/CSSPlugin.min.js"> </script>  -- 基础插件，用于制作CSS动画2D，3D动画
<script src="js/greensock-js/plugins/BezierPlugin.min.js"> </script>  -- 基础插件，用于制作贝塞尔曲线
<script src="js/greensock-js/TimelineLite.min.js"> </script>  -- 核心工具，创建时间轴管理动画
<script src="js/greensock-js/easing/EasePack.min.js"> </script>  -- 拓展的时间曲线，例如bounce

使用TweenMax上面的加载可以简约为

<script src="js/greensock-js/TweenMax.min.js"> </script>

---

制作动画

动画的三要素：

1.动画目标对象 2.动画的持续时间 3.变化的属性

---

制作一个简单的CSS动画。 制作CSS动画需要用到CSSPlugin（已经包含于TweenMax）。 使用TweenMax的to()方法，将一个id为"obj"的DOM元素的CSS属性的left属性从当前值过渡到500px，从而产生移动效果。持续时间3秒。

<div id="obj"></div>

#obj{
  position:relative;
  left:200px;
  top:20px;
  width:50px;
  height:50px;
  background:#6fb936;
  border-radius:5px;
}

TweenMax.to("#obj", 3, {left:500});

---

left属性动画需要position:reletive支持，如需相对位置移动可使用x(CSS3的2D动画)更为简便

TweenMax.to("#obj", 3, {x:200});//在原有位置向右移动200px
TweenMax.to("#obj", 3, {x:200, y:100});//向右移动200px的同时向下移动100px

---

元素从左边200px的位置开始运动到指定的位置

TweenLite.fromTo($box, 2, {x: '-=200px'}, {x: 150});

x:150会覆盖在CSS中定义的transform: translate(–50%, –50%)的样式，用新的transform: matrix(1, 0, 0, 1, 150, -50);样式来代替。

[WangShuXian6]

贝塞尔曲线生成工具

https://www.tweenmax.com.cn/tool/bezier/

三次贝塞尔曲线控制(cubic) M200 250 C347 133 552.5 106 500,250

二次贝塞尔曲线控制(quadratic) M200 250 Q449.5 101 500 250

[WangShuXian6]

GreenSock动画平台文件组成

---

包含于TWEENMAX

核心工具

TweenLite TweenMax TimelineLite TimelineMax

基础插件

Attr Bezier CSS DirectionalRotation RoundProps

核心时间曲线(包含于TweenLite)

Linear Power0 Power1 (a.k.a. "Quad") Power2 (a.k.a. "Cubic") Power3 (a.k.a. "Quart") Power4 (a.k.a. "Strong" or "Quint")

拓展时间曲线(EasePack)

Back Bounce Circ Elastic Expo ExpoScaleEase Sine RoughEase SlowMo SteppedEase

---

拓展插件

ColorProps CSSRule Easel Modifiers Pixi ScrollTo Text

其他工具

Draggable Requires CSSPlugin CustomEase Requires GreenSock account (free)

商业插件

DrawSVG Physics2D PhysicsProps ScrambleText CustomBounce Requires CustomEase CustomWiggle Requires CustomEase GSDevTools MorphSVG SplitText ThrowProps Commercial license

[WangShuXian6]

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	删除/清除/杀死

[WangShuXian6]

TweenMax API 动画结构

---

TweenMax()

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

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

TweenMax()的参数

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

往右移动500px，同时改变透明度

<div class="box green"></div>
<p>往右移动500px，同时改变透明度</p>

.box {
width:50px;
height:50px;
border-radius:6px;
margin-top:4px;
display:inline-block
}
.green{
background-color:#6fb936;
}

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()
```ts
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属性、延迟、重复次数等）

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

<div class="wrapper">
<div class="box green"></div>
<div class="box orange"></div>
<div class="box grey"></div>
</div>

.box {
width:50px;
height:50px;
border-radius:6px;
margin-top:4px;
}
.green{
background-color:#6fb936;
}
.orange {
background-color: #f38630;
}
.grey {
background-color: #989898;
}

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

---

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	是	设置动画的一些属性及其他参数

元素从500px开始，返回原来位置

<div class="box green"></div>
<p>元素从500px开始，返回原来位置</p>

body {
background: #f8f8f8;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0 10px;
padding: 0;
}
.box {
width:50px;
height:50px;
border-radius:6px;
margin-top:4px;
}
.green{
background-color:#6fb936;
}

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	是	结束点动画参数

元素从200px移动到500px

<div class="box green"></div>

.box {
width:50px;
height:50px;
border-radius:6px;
margin-top:4px;
display:inline-block
}
.green{
background-color:#6fb936;
}

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

---

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

每个动画序列的开始时间间隔0.5秒

<h2>TweenMax.staggerTo()</h2>
<div id="demo">
<p>每个动画序列的开始时间间隔0.5秒</p>
<div class="box green"></div>
<div class="box grey"></div>
<div class="box orange"></div>
<div class="box green"></div>
<div class="box grey"></div>
<div class="box orange"></div>
<div class="box green"></div>
<div class="box grey"></div>
<div class="box orange"></div>
</div>

body {
background-color:#1d1d1d;
color:#f3f2ef;
}
h2 {
font-family: "Signika Negative", sans-serif;
margin: 10px 0 10px 0;
font-size:30px;
}
p{
line-height:22px;
margin-bottom:16px;
}
#demo {
height:100%;
position:relative;
}
.box {
width:50px;
height:50px;
position:relative;
border-radius:6px;
margin-top:4px;
display:inline-block
}
.green{
background-color:#6fb936;
}
.orange {
background-color:#f38630;
}
.grey {
background-color:#989898;
}

TweenMax.staggerTo(".box", 1, {rotation:360, y:100}, 0.5);

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函数的作用域

展示

<h2>TweenMax.staggerFrom() with cycle</h2>
<div id="demo">
<p>cycle属性允许你在所有TweenMax、TimelineLite和 TimelineMax插件中基于stagger的函数里面，定义一个array的属性值或者function的属性值 (注释中有详细列表)。</p>

[WangShuXian6]

TweenMax API 动画初始设置

---

delay

delay:Number

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

延迟三秒开始动画

<div class="box green"></div>
<p>延迟三秒开始动画</p>

body {
background: #f8f8f8;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0 10px;
padding: 0;
}
.box {
width:50px;
height:50px;
line-height:50px;
text-align:center;
color:#fff;
font-size:18px;
border-radius:6px;
margin-top:4px;
display:inline-block
}
.green{
background-color:#6fb936;
}

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。
```ts
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

展示

<div class="box green"></div>

body {
background: #f8f8f8;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0 10px;
padding: 0;
}
.box {
width:50px;
height:50px;
border-radius:6px;
margin-top:4px;
display:inline-block
}
.green{
background-color:#6fb936;
}

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

展示

<div class="box green"></div>
<br>
<input type="button" id="playBtn" value="play()" title="播放">

body {
background: #f8f8f8;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0 10px;
padding: 0;
}
.box {
width:50px;
height:50px;
border-radius:6px;
margin-top:4px;
display:inline-block
}
.green{
background-color:#6fb936;
}

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

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

***
### immediateRender
```ts
immediateRender:Boolean

立即渲染，默认false。

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

另外from()方法的运动对象是立即渲染的（默认true），如果你不想该运动对象被渲染，可以把这个参数设为false。

immediateRender适用于TweenMaxTweenLite

橙色块设置了不立即渲染，因此动画开始前没有到达指定位置

<div class="box green"></div>
<p>橙色块设置了不立即渲染，因此动画开始前没有到达指定位置</p>
<div class="box orange"></div>

body {
    background: #f8f8f8;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0 10px;
    padding: 0;
}
.box {
    width:50px;
    height:50px;
    border-radius:6px;
    margin-top:4px;
    display:inline-block
  }
.green{
    background-color:#6fb936;
  }
.orange {
    background-color: #f38630;
}

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

overwrite适用于TweenMaxTweenLite

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

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"		在动画属性第一次渲染时才覆盖掉其他所有的动画属性。

默认模式2，"auto"

<p>默认模式2，"auto"</p>
<div class="box green"></div>

.box {
width:50px;
height:50px;
border-radius:6px;
margin-top:4px;
display:inline-block
}
.green{
background-color:#6fb936;
}

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

---

---

---

---

---

---

---

---

---

---

---

---