H5 动画大师 TweenMax.js/GSAP

爱被打了一巴掌 2023-06-17 03:58 8阅读 0赞

手写过 CSS3 做 H5 动画，那过程很累，很低级。于是这次改用 TweenMax 库，感觉非常不错，原来它是做动画的老行尊，失敬失敬，早在 Adobe Flash 时代，这款就是知名的类库，直到现在还可以在其 GitHub 上找到它的 ActionScript 2/3 的开源代码，怪不得现在转到 JS 上面来，都那么的成熟。

*  官网：https://greensock.com/
 *  源码：https://github.com/greensock/GSAP
 *  中文网 https://www.tweenmax.com.cn/ 弄得很不错，还有破解下载，良心

3.0 之后，TweenMax.js 业已改名为 GSAP，并统一了 API，没有那么多的分层，这对于用户来说好处就是更简单了，不用因为选择不同的库而犯难。不过笔者因为插件而尚未升级的关系，不敢贸然去使用新版，下文的代码仍然是 2.x 的，这里特此说明一下。

## 概念 ##

Tweening 是 inbetweening 的缩写，在动画序列之间的状态创建帧，意思是放置在一个运动结束，要进行下一个运动前，中间创建一个流畅的过渡。这种概念在 Flash 时代早已有之，相信老玩家对这动画的概念不会陌生。显然这是建立在以帧尾单位的基础上，而网页上却是没有特定帧的概念的。保留下来的仍然有时间轴这个概念。

TweenMax 有个更准确的说法"状态操控器"，一如[官方教程][Link 1]开明宗义所说的“GSAP is a property manipulator”，——这怎么说呢？我们通过一个“数字脉冲器”的网页特效来说明之，如下图所示。  
![在这里插入图片描述][20191205223832490.gif]  
配合下面简单几行的代码，你应该可以猜出"状态操控器"之含义如何了。

TweenLite.to({n:0.1}, 1, { n:2.48, onUpdate: () => h3.innerHTML = n3.n.toFixed(2)})

类似于 JS 中访问 CSS 属性的写法，一些 CSS 属性对应到 TweenMax 中有所不同，比如 transform 中translate 在 TweenMax 中使用 x,y 就对应着 translate(x,y)。任何的 CSS 属性需要从有－的写法变为驼峰式的写法，比如 background-color 修改为 backgroundColor 等，以及 transform:rotate() 变为 rotation。更多的对应 CSS 属性如下。

*  CSS| TweenMax
 *  translateX() x
 *  translateY() y
 *  translateZ() z
 *  rotate() rotation
 *  rotateY() rotationY
 *  rotateX() rotationX
 *  scaleX() scaleX
 *  scaleY() scaleY
 *  skewX() skewX
 *  skewY() skewY

autoAlpha 方法是 TweenMax 中一个特别的属性，它把 opacity 和 visibility 两个属性合二为一了。

## 时间轴概念 ##

TweenMax 与低级动画库的区别在于时间轴。我们知道，原生写 H5 动画，就算你不写 JS，纯 CSS 的，写 delay 都写到你烦，而且一大串的动画连起来的，修改一个时间点，后面全都跟着改~“牵一发动全身”。写 JS 的话，也要控制一大堆计时器——好不痛苦。为此，一般通过直观的时间轴（TimeLine）来解决动画时间点的控制问题。

采用 to().to()… 链式调用，实际是执行上一个动画之后，顺序线性执行下一个动画。TweenMax 还提供其他手段实现非线性的动画执行顺序。下面的例子遇到相应的代码中我们会进行介绍。

## 实例 ##

入门教程方面网上已经很多了，这里不再赘述，都是一些 API 说明。下面我们就通过一个实际的例子来说说 TweenMax 的应用。下面是实际效果动图。

![在这里插入图片描述][20191206152432267.gif]动画脚本如下。

new TimelineMax({ delay:1})
    		.to('.p1-1 .building', 1.2, { transform: 'scaleY(1)', ease : Bounce.easeOut}).add('start')
    		.add(new TimelineMax({ repeat: -1})
    			.to('.p1-1 .plane', 2.8, { x: 600, opacity:1})
    			.to('.p1-1 .plane', .5,  { x: '+=300', opacity:0}))
    		.to('.p1-1 .tree', .8, { autoAlpha: 1, transform:'scaleX(1)',ease : Bounce.easeOut})
    		.to('.p1-1 .train', 3.8, { x: 2600, repeat: -1}, 'start')
    		.to('.p1-1 .car', 4.8, { x: 2490, repeat: -1, ease : Power1.easeIn}, 'start')
    		.to('.p1-1 .r-1', .8,  {  y:-170, ease: Power1.easeIn, opacity:1}, 'start')
    		.to('.p1-1 .r-2', 1.2, {  y:-130, ease: Power1.easeIn,opacity:1}, 'start')
    		.staggerFrom(mySplitText.chars, 0.8, { opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut}, 0.01)
    		.to('.r-1', 1.5, {  y:-195, ease: Power1.easeOut,yoyo:true,repeat:-1})
    		.to('.r-2', .9,  {  y:-120,ease: Power1.easeOut, yoyo:true,repeat:-1})
    		.add(new TimelineMax({ repeat: -1}).to('.light-1', 1, {  opacity: .5}).to('.light-1', .6, { opacity: 1}))
    		.add(new TimelineMax({ repeat: -1}).to('.light-2', .5, {  opacity: .3}).to('.light-2', .5, {  opacity: 1}).to('.light-2', .6, { opacity: .5}))
    		.add(new TimelineMax({ repeat: -1}).to('.light-3', 1.5, {  opacity: .2}).to('.light-3', .9, {  opacity: 1}).to('.light-3', .5, { opacity: .2}))
    		.add(new TimelineMax({ repeat: -1}).to('.light-4', .5, {  opacity: .3}).to('.light-4', .5, {  opacity: 1}).to('.light-4', .6, { opacity: .5}))

new TimelineMax(\{delay:1\}) 构造器参数表示该时间轴的全局参数，这里延时一秒钟。

执行一个动画之后，调用 add(‘start’) 表示一个时间点的标记，在下面的动画中可以令动画插入到该标记之后执行，例如 to(’.p1-1 .car’, 4.8, \{x: 2490, repeat: -1, ease : Power1.easeIn\}, ‘start’)。还可以 start+=.25 延时 0.25 秒进行微调，或者 -= 提前时间。

### 渐显（FadeIn）效果 ###

如下做一个渐显（FadeIn）的效果，无非就是初始透明度为0，然后执行动画的话增加其透明度到1并且位移。

![在这里插入图片描述][20191206161707784.gif]  
参数是目标元素，动画持续时间（单位：秒），目标配置。

.to('.p1-1 .plane', 2.8, {x: 600, opacity:1})

这里 x 即垂直位移 600 个像素，单位可以其他 CSS 合法单位例如 % 百分比，用字符串表示。这里 600 是绝对坐标的位置，但也可以相对位移的距离，写法如 “+=20”，表示在当前 x 坐标上升高 20 个像素。opacity 是透明度，你也可以用 autoAlpha : 1 代替。

### 呼吸效果 ###

呼吸效果就是 yoyo，应用很广，在 TweenMax 中也很简单，同时设置无限循环 repeat: -1 和 yoyo: true 即可

.to('.r-1', 1.5, { y:-195, ease: Power1.easeOut,yoyo:true,repeat:-1})

![在这里插入图片描述][20191206171106630.gif]

### 加入另外的时间轴 ###

有时候复杂的动画不能满足于一个时间轴，那么可以新建一个时间轴实例，然后再加入当前主时间轴中，例如：

.add(new TimelineMax({repeat: -1}).to('.light-4', .5, { opacity: .3}).to('.light-4', .5, { opacity: 1}).to('.light-4', .6, {opacity: .5}))

### 其他技巧 ###

staggerTo() 支持传入元素数组

.staggerTo(document.querySelectorAll('.icon'), 1.1,  {opacity: 1}, .1)

### 备忘单（Cheat Sheet） ###

[https://ihatetomatoes.net/greensock-cheat-sheet/][https_ihatetomatoes.net_greensock-cheat-sheet]

### 教程 ###

*  https://greensock.com/get-started 官方入门 推荐
 *  https://segmentfault.com/a/1190000005366176\#comment-area
 *  https://www.w3cplus.com/blog/tags/524.html 比较多 SVG 动画的例子
 *  http://svgtrick.com/book/greensock/
 *  https://www.cnblogs.com/tujia/category/898044.html
 *  http://www.topfe.cn/javascript/524.html
 *  https://blog.csdn.net/kaizi524/article/details/50339329

### 资源 ###

*  可视化工具 GSDevTools https://webdesign.tutsplus.com/tutorials/a-first-look-at-gsdevtools-by-greensock–cms-29531
 *  https://wow.techbrood.com/fiddle/12084
 *  推荐一厂商 https://blog.csdn.net/xhload3d、http://www.hightopo.com/

[Link 1]: https://greensock.com/get-started/
[20191205223832490.gif]: https://img-blog.csdnimg.cn/20191205223832490.gif
[20191206152432267.gif]: https://img-blog.csdnimg.cn/20191206152432267.gif
[20191206161707784.gif]: https://img-blog.csdnimg.cn/20191206161707784.gif
[20191206171106630.gif]: https://img-blog.csdnimg.cn/20191206171106630.gif
[https_ihatetomatoes.net_greensock-cheat-sheet]: https://ihatetomatoes.net/greensock-cheat-sheet/