GreenSock-TweenMax极简入门指南

2018-06-28

GreenSock简介

GreenSock在Flash动画时代久负盛名，并且GreenSock的维护团队与时俱进，推出了以javascript为核心的GreenSock，在Flash和HTML5项目中，你可以使用相同的动画工具集，同样的API，同样的开发体验，同样关注性能。

它具有以下优点:

速度快。GSAP专门优化了动画性能，使之实现和CSS一样的高性能动画效果。
轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量，TweenLite包非常小（基本上低于7kb）。GSAP提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块，你可以按需使用。
没有依赖。
灵活控制。不用受限于线性序列，可以重叠动画序列，你可以通过精确时间控制，灵活地使用最少的代码实现动画。
任何对象都可以实现动画。

开始之前先来了解下GSAP动画平台四个插件的不同功能。如下图所示：

插件图

对应四个插件，GreenSock也相应提供对应的四个JavaScript序列工具方法来开发动画，主要是TweenLite、TweenlineLite、TweenlineMax、TweenMax。

建议在开发中使用TweenMax这个全功能的js文件，它包括了GreenSock动画平台的所有核心的功能。

基础

本教程主要以TweenMax这个全功能的js文件为基础，它包括了GreenSock动画平台的所有核心的功能。还需要引入jquery来选择和操作DOM。

选择元素

html, body {
  height: 100%;
}
body {
  background-color: #262626;
  font-family: 'Open Sans', sans-serif;
  overflow: hidden;
}
#box {
  background-color: #88ce02;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.boxSmall {
  position: absolute;
  background-color: #70a40b;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 75px;
  z-index: 2;
}

1
2
3

<div id="box">
  <div class="boxSmall"></div>
</div>

1 2	// 通过jqery选择元素接下来让它动起来 var $box = $('#box');

动画

TweenLite.to()方法

下面就是让它动起来，可以使用TweenLite.to()方法来使元素动起来。比如，让元素移动到浏览器左边的边缘，我们就可以使用TweenLite.to()方法。

1 2	TweenLite.to($box, 0.7, {left: 0}); // TweenLite.to(what, duration, { which CSS properties });

在GreenSock中，一些CSS属性对应到GreenSock中还是有些不同的。比如transform中translate在GreenSock中使用x,y就对应着translate(x,y)。任何的CSS属性需要从有－的写法变为驼峰式的写法。比如background-color修改为backgroundColor等。以及CSS中的transform:rotate()变为rotation。

TweenLite.from()方法

TweenLite.from顾名思义，就是使元素从指定的属性的值运动到元素的初始值。还是以上一个demo为例子，修改代码如下：

1	TweenLite.from($box, 2, {x: '-=200px', autoAlpha: 0});

上面的代码是用来使元素从定义在.from()方法里的位置运动到在CSS中定义的位置。

TweenLite.set()

有时候，我们只是想设置元素的一些CSS属性并不需要动画效果，比如，重设元素的位置。

这个时候就可以使用GreenSock提供的.set()方法。
去掉我们前面编写的代码除了定义好的$box变量，编写下面的代码：

1
2
3

TweenLite.set($box, {x: '-=200px', scale: 0.3});
TweenLite.set($box, {x: '+=100px', scale: 0.6, delay: 1});
TweenLite.set($box, {x: '-50%', scale: 1, delay: 2});

运行上面的代码，可以看到元素只是单纯的在改变属性并没有动画效果。

TweenLite.fromTo()方法

最后来说一说TweenLite.fromTo这个方法。

顾名思义，这个方法我们可以定义元素的起始位置：

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

缓动曲线

TweenMax提供了下面这些运动曲线：

1、Back 2、SlowMo 3、StppedEase 4、RoughEase 5、Bounce 6、Circ 7、Elastic 8、Expo 9、Sine

具体曲线运动效果，可以去这个地址看看：

在实际开发中，开发动画效果都会在动画过程中做一些其它的操作，这个时候就要用到回调函数了。TweenMax提供了在动画各个阶段的回调方法，使用起来非常方便。

回调方法

首先以.fromTo()方法来说明回调的使用用法。

比如，我们想要在动画开始的时候来触发回调函数。首先来创建一个start的函数：

1
2
3

function start(){
  console.log('start');
}

触发回调函数，只需要添加这句代码就可以了onStart:start就可以了，非常简单吧。

1	TweenLite.fromTo($box, 2, {y: '-=200px'}, {y: 100, ease: Bounce.easeOut,onStart:start});

你也可以添加onUpdate和onComplete来触发对应的回调函数：

function start(){
  console.log('start');
}
function update(){
  console.log('animating');
}
function complete(){
  console.log('end');
}

OK，到目前为止，我们开发的动画都是针对单个元素的运动。在实际开发中有时候需要多个元素一起运动，只是运动的属性的值不同而已，比如像下面这样的动画：

多个元素运动

staggered()方法

也许可以使用TimelineLite.to()方法一个一个的来执行。这样虽然可以达到目的，但是不够优雅。greensock给我们提供了staggered()这一方法来实现，先来看看staggerFrom这个方法的语法：

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

TweenMax.staggerFrom(targets:目标元素为一个数组,duration:动画执行时间,vars:动画的属性，比如位移、放大缩小以及延迟等,stagger:表示目标数组中的每一个对象动画延迟执行的时间,onCompleteAll:所有的序列动画完成后的回调方法,onCompleteAllParams:传参数给onCompleteAll方法)。

TweenMax.staggerFrom(".btn", 2, {scale:0.5, opacity:0, delay:0.5, ease:Elastic.easeOut, force3D:true}, 0.2);
$(".btn").click(function(){
  TweenMax.staggerTo(".btn", 0.5, {opacity:0, y:-100, ease:Back.easeIn}, 0.1);
});

从代码可以看到，使用stagger()方法可以同时操作多个元素来产生动画效果，仅仅只需要一句代码方便好使。

staggerFrom()方法使用高级技巧cycle

像上面的例子，我们只能一次赋予一个属性一个值，如x:100, rotation:90。如果我们想一次性让元素的属性能随机的随指定的值来运动，就可以使用到taggerFrom()方法中的cycle来达到目的，如下实例所示：

TweenLite.set(".wrapper",{visibility:"visible"});
var tl = new TimelineMax();
tl.staggerFrom(".list li",0.5,{
  opacity:0,
  cycle:{
    x:[-100,100],   //x:[-100,100,200,300]  rotationX:[-90,90]
    //rotationX:[-90,90],
    //transformOrigin:["50% top -100","50% bottom 100"]
    //x:function(i){
      //return Math.random() * 300;
      //return (i+1) * 50;
    //},
    ease:function(i) {
      return Back.easeOut.config(i * 0.3);
    }
  }
},0.1)
tl.timeScale(0.5);

我们在cycle中定义了一个数组赋予给X(即transform中的translateX),在实际代码运行中，stagger()会依次从数组中取值赋予给元素，不断的循环。这在执行多个对象的动画的时候非常方便。

链式动画

使用过jquery都知道，jquery又一个很强大的特性即链式操作，比如：

1	$("#myphoto").css("border","solid 2px#FF0000").attr("alt"," good");

对一个jQuery对象先调用了css()函数修改样式，然后使用attr()函数修改属性，这种调用方式象链一样，所以称为”链式操作”。

链式操作能够让代码变得简洁，因为往往可以在一条语句中实现以往多条语句才能完成的任务。

同样在GreenSock中也支持类似jquery一样的链式动画操作，先来看实例：

var tl = new TimelineLite();
tl.to(".green", 1, {x:550})
  .to(".blue", 1, {x:550})
  .to(".orange", 1, {x:550})

是不是跟jquery的链式操作很相似，所有的动画效果是一个接着一个运行的，即链式动画。

GreenSock不仅提供了像这种方便的链式动画操作，而且还提供了各种动画的控制方法，比如播放、暂停等方法可以更加灵活的来对动画进行控制。

动画控制

GreenSock提供了play()，pause()，resume()，reverse()，seek()，restart()， progress()，timeScale()等方法来控制动画。下面来看看这些方法都具体起到了什么作用。

play()方法是开始播放动画；
pause()是暂停动画；
resume()是重新开始播放动画，是从暂停处开始播放；
reverse()是从相反的方向来执行动画；
seek()是跳转到整个动画时间的某一个时间点的时地状态，比如整个动画时间是3秒，如果调用seek(1)就表示跳转到动画在1秒这个时间点的状态；
progress()是指执行整个动画到某一个时间段，只接收0到1之间的数字。比如给到参数0，表示在动画开始的时候；给到参数0.5表示动画直接跳转到整个动画执行来50%的状态；1就表示动画执行完的状态；
restart()表示重新开始播放动画。

GreenSock基本的知识就介绍到这了，利用这些方法基本上可以对付开发中一些常见的动画开发，剩下的就要看你的想象力了。

GreenSock进阶

3D效果

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

下面是分别使用transformPerspective和没用transformPerspective的实例：

TweenLite.set(".box",{transformPerspective:300});
TweenLite.set(".600box",{transformPerspective:500});
TweenLite.to(".box", 3, {rotationY:360, transformOrigin:"left top"})
TweenLite.to(".nbox", 3, {rotationY:360, transformOrigin:"left top"})

可以明显看到，第三个元素由于没有使用perspective属性，只是一个平面的旋转效果。

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

transformOrigin

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

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