GreenSock 中几个隐藏的高级使用技巧

1,480 阅读3分钟
原文链接: svgtrick.com

这篇文章来讲讲GreenSock的7个实用技巧,如果你对GreenSock还不是很熟悉的话,可以去看看我之前写的一篇关于它的基础教程,GreenSock简明教程

灵活运用Tween动画

GreenSock动画的核心就是使用JavaScript来操纵元素对象的属性。大部分GreenSock的动画方法通过操作元素的CSS属性,例如,opacity,transform,width,height等属性来实现动画效果。比如把一个元素移动从左往右移:

var myTween = TweenLite.to(“.logo”, 10, {x:500});

我们一般都是通过上面的方法来写一些元素运动的动画,比如上面的myTween。我们都知道对于每一个通过GreenSock创建的动画,它都是一个单独的tween动画或者是多个tween集合timeline,并且可以通过它们来控制动画的不同属性。

比如,通过使用timeScale()方法来控制动画的播放速度,1倍播放或者是2倍播放等:

// returns the current timeScale
myTween.timeScale()
// sets the timeScale to 2 (plays twice as fast)
myTween.timeScale(2)

通过上面的方法来控制动画,虽然很方便,但是如果想更进一步的控制动画运动速度,比如匀速运动或者是变速运动,上面的方法就有点捉襟见肘了。

这个时候我们可以通过下面的方法来达到目的:

//accelerate to 4x normal speed over the course of 2 seconds
TweenLite.to(myTween, 2, {timeScale:4, ease:Power4.easeIn});

从上面的代码,我们可以看出,我们通过一个tween的方法来驱动已经定义好的tween动画,这样就可以能更加灵活的控制动画,比如加速度等。可以看下面这个实例:

demo地址

实例2

跳帧控制

GreenSock中,我们可以通过playpausereverse等方法来控制动画的播放、暂停以及倒着放等操作。还可以通过它们来控制动画跳帧播放。

比如,我想动画从第3帧开始播放,或者是从已经定义好标记的地方开始播放,可以通过下面的方法来操作:

// plays the animation forward from current time
timeline.play();
// jumps 3 seconds into the animation and plays from there
timeline.play(3);
// jumps to the “section2” label and plays from there
timeline.play(“section2”);

不过,当你的动画有45秒,你只是想测试下最后5秒的动画,那该怎么做呢?GreenSock也提供了对应的方法来做,只需要传入一个负数的参数就可以了:

// jumps 5 seconds from end of timeline and plays from there.
timeline.play(-5);

上面的代码就表示从最后5秒的地方开始播放动画。

一招控制所有的GreenSock动画

想象一下,一个web页面,游戏或者是一个app正在运行动画,你现在需要在不改动原有动画代码的前提下,需要一键暂停所有的动画。这个时候该怎么办呢?GreenSock也提供了对应的方法来达到这个目的。即TimelineLite中的exportRoot()方法,它可以控制所有正在运行的动画。

正如,我们在第一个技巧中所知道的那样,我们可以通过timeScale()方法来控制时间轴上动画播放的速度,结合exportRoot()方法可以控制所有正在运行动画播放的速度:

// place all active animations in one timeline
var tl = TimelineLite.exportRoot();
// slow down all animations to quarter-speed over the course of 1 second
TweenLite.to(tl, 1, {timeScale:0.25});

你可以去GreenSock的官网来体验下这个属性,当你点击下载按钮的时候,GreenSock主页所有正在播放的动画全部会暂停下来。这里就使用是使用了exportRoot()方法。

上面总结的这几个小技巧,可能你平时在使用GreenSock开发中没有太注意到的,但是确实可以大大提高你的开发体验和效率。

本文主要是从7 hidden gems of the GreenSock Animation Platform这篇文章整理而来,有删减,有疏漏或者理解不到位的地方,还请多多指教!