GSAP、プロフェッショナル Web アニメーション ライブラリ_html/css_WEB-ITnose

Web ページでアニメーションを作成する場合、jQuery の animate() メソッド、または CSS3 のアニメーションとトランジションをすぐに思い浮かべるかもしれません。さて、この記事では、Web アニメーションのもう 1 つの代替手段である GSAP を紹介します。

GSAP の正式名称は GreenSock Animation Platform です。その名前は少し奇妙です (公式 Web サイトではまだ参加できるさまざまなアムウェイ クラブを提供しています)。これは確かに、から発展したプロのアニメーション ライブラリです。フラッシュの時代から今日まで。

構成の紹介

公式 Web サイトで [Download zip] を選択すると、GSAP ソース コードを入手できます。解凍すると、次のファイルが表示されます。 > TweenLite はこちら .js、TweenMax.js、TimelineLite.js、および TimelineMax.js の 4 つのファイルは、GSAP の一般的な参照ライブラリ ファイルです。ただし、これらのファイルには、以下に示すように、いくつかの重複する包括的な関係があります。

したがって、GSAP の主な機能を簡単に紹介したい場合は、TweenMax.js ファイルを使用できます (前の図に示されているこのファイルのサイズを参照してください)。ライブラリ ファイル サイズを小さくしたい場合は、TweenLite.js (必須) と他のファイルを組み合わせて使用​​する必要があります。

これら 4 つのファイルには何が含まれていますか?

TweenLite は GSAP の主要なコアであり、基本的なアニメーションを作成するために使用され、他のさまざまなモジュールの基礎となります。一般に、プラグイン/CSSPlugin は、DOM 要素のアニメーション (私たちが最もよく知っているアニメーション) を実装するために使用されます。

TimelineLite はタイムラインと呼ばれるアニメーション コンテナであり、複数のアニメーションを順序立てて整理および制御するために使用されます。

TimeLineMax は、TimelineLite をベースにして、より高度な構成と制御を行うことができるアップグレード バージョンです。

TweenMax は、最初の 3 つに加えて、よく使用されるプラグイン (プラグイン) とイージング関数の補足も含まれています。

GSAP は、カスタマイズで所有するモジュールを次のように説明します。

デフォルトで選択される TweenLite + CSS プラグインは、最も単純なアプリケーションの組み合わせです。 この記事は、「彼らは始めました」から始まります。 (v1.18.4)。

TweenLite の基本アニメーション

値のアニメーション

すべてのアニメーションは値の変更から始まります。

TweenLite はメインコアとして、まさにこれを行います。 TweenLiteの具体的な使い方は？次の例を見てください:

TweenLite.to(target,duration,vars) は TweenLite の最も一般的に使用されるメソッドです。 target はアニメーション要素を指定し、duration はアニメーション要素を指定します。アニメーションの継続時間、および vars アニメーションのターゲット値を指定します。ここでは DOM 要素は操作されないため、通常作成するアニメーションとは異なることに注意してください。実行します:

var obj = {    myProp: 0};TweenLite.to(obj, 0.2, {    myProp: 1,    onUpdate: function() {        console.log("[update] obj.myProp = ", obj.myProp);    }});

TweenLite の機能は、obj の属性 myProp を初期値 0 から目標値 1 に変更することであることがわかります。視覚効果はありませんが、基本的な価値のあるアニメーションです。

視覚効果のある CSS アニメーション

TweenLite にプラグイン/CSSPlugin を追加すると、使い慣れた DOM 要素をアニメーション化できます。例:

効果:

TweenLite.to("#ball1", 2, {  x: 200});

GSAP は、x と y を使用して、変換のtranslateXとtranslateYを表します。 TweenLite.to(target,duration,vars) の最初のパラメータ target はセレクターにすることができるので、ここでは id ball1 の要素を選択し、持続時間 2 秒のアニメーションを実行し、現在位置から の位置に移動します。変換X(200px)。

3 番目のパラメーター vars に任意の CSS 属性を追加でき、それらは選択した要素のアニメーション ターゲット値として使用されます。

遅延、イージング、アニメーション イベント

CSS プロパティに加えて、3 番目のパラメーター vars では、アニメーションを構成するための特定の意味を持つ多くのプロパティを指定することもできます。 GSAP はそれらを名前に基づいて自動的に区別します。

たとえば、アニメーションの遅延とイージング関数をそれぞれ設定するには、Delay と Easy を使用します。

ここでのアニメーションは 2 秒の遅延で実行され、変化します。線形変化に変換します (デフォルトは Quad.easeOut)。

アニメーションの開始時、アニメーションの各フレームの実行時、およびアニメーションの終了時に対応するイベント関数を実行する場合は、onStart、onUpdate、および onComplete を使用します。値アニメーションの前の例では、onUpdate を通じて値の変更を出力します。

TweenLite.to("#ball1", 2, {  x: 200,  delay: 2,  ease: Linear.easeNone});

GSAP には、イージング関数をクエリするための専用の場所があります。利用可能な特定のプロパティについては、公式ドキュメントを参照してください。

相対値

要素が現在移動しているかどうかわからない場合がありますが、要素を元の位置に対して特定の距離だけ移動させたいだけです。このとき、次のように相対値を使用できます:

上記の記述方法によれば、要素の現在のtranslateXが何であっても同様です。 、相対的に 200px オフセットされます。

その他のアニメーションメソッド

TweenLite.to("#ball1", 2, {  x: "+=200px"});

to() の他に、from() と fromTo() があります。言葉はどれも簡単ですよね？

from() と to() のパラメータと使用法はまったく同じですが、vars の属性がアニメーションの初期値を定義し、要素の元の属性がアニメーション ターゲットとして使用される点が異なります。価値。例:

効果:

TweenLite.from("#ball1", 2, {  x: "+=200px",  backgroundColor: "#2196f3"});

ここでわかるように、カラー アニメーションも利用できます。

TweenLite.fromTo(target, duration, fromVars, toVars) 的参数要多1个，不过从字面意思就很容易理解，即分别让你指定动画的初始和结尾。需要注意的是，前面提到的具有特定意义的属性，如 delay ， ease ，都要写在 toVars 里，在 fromVars 里定义的无效。

动画保存及控制

和 jQuery.animate() 的风格不同，GSAP以动画为主体，你可以这样保存动画：

var tween = TweenLite.to("#ball1", 2, {  x: "+=200px"});

然后你可以做精细的控制：

// 暂停tween.pause();// 继续播放tween.resume();// 反转播放tween.reverse();// 跳转到1s进度处开始播放tween.seek(1);// 重播tween.restart();// 动画变为三倍速tween.timeScale(3);

这些可以看做GSAP作为专业动画库的体现。

选择器

前面的例子中反复用到了类似jQuery的选择器，但GSAP并没有自带选择器，相关源码如下：

TweenLite.selector = window.$ || window.jQuery || function(e) {    var selector = window.$ || window.jQuery;    if (selector) {        TweenLite.selector = selector;        return selector(e);    }    return (typeof(document) === "undefined") ? e     : (document.querySelectorAll ? document.querySelectorAll(e)         : document.getElementById((e.charAt(0) === "#") ? e.substr(1)             : e));};

GSAP不依赖jQuery，但如果引入了jQuery，GSAP会使用jQuery的选择器，否则回退到 document.querySelectorAll() 及 document.getElementById() 。

TimelineLite的动画管理

好像 TweenLite + css plugin 就已经足够用了，这个Timeline系列是做什么的呢？

想象你是一个动画的导演，你要按剧本安排演员在一个CUT里依次上场和退场。在前文的例子里，我们只有一个演员（ #ball1 ），但现在，我们要拍一个有20+演员的动画大片，要怎么办呢？

你也许曾用css3的 animation 做过类似的事情，做法是，当转换到一个场景（CUT）后，为场景里的所有演员依次设定适当的 delay 。只要 delay 计划好，看起来就是漂亮精彩的大片。

不过，这可没有那么简单，假如你已经安排好了20位演员的上场时间，现在改了下剧本，来了第21位演员要在最开始上场，你会发现你可能要依次调整在它之后的所有演员的 delay …

GSAP的TweenLite也会有同样的问题，因此，我们需要有一个工具来统一管理多个元素的多个动画，这就是TimelineLite。

时间轴

如果你做过视频编辑，你一定很熟悉“时间轴”这个概念。简单来说，每一个元素的单次动画都是一段素材，我们需要把它们分别放置到同一个时间轴的适当位置，才能集合在一起得到有序的动画大片。

现在我们引入 TimelineLite 。下面是一个例子：

var tl = new TimelineLite();tl.from("#ball1", 1, {    y: "-=60px",    autoAlpha: 0}).from("#ball2", 1, {    x: "+=60px",    autoAlpha: 0}).from("#ball3", 1, {    y: "+=60px",    autoAlpha: 0}).from("#ball4", 1, {    x: "-=60px",    autoAlpha: 0});

效果是：

以上的 tl.from() 等同于以下代码：

tl.add(TweenLite.from("#ball1", 1, {    y: "-=60px",    autoAlpha: 0}));

可见，TimelineLite像一个容器，它可以通过 add() 方法将TweenLite动画添加到自己的时间轴上。然后，动画将以时间轴为整体，进行播放。

在默认情况下，TimelineLite会这样按添加顺序依次排列它们的位置，就这样，我们不借助 delay 做出了这种较复杂的动画组合。

如果画一下这里的时间轴，是这样的：

调整放置位置

如果要让第2个动画不是在第1个刚结束时播放，而是更提前一点，看起来更连贯的话？

这样做：

var tl = new TimelineLite();tl.from("#ball1", 1, {    y: "-=60px",    autoAlpha: 0}).from("#ball2", 1, {    x: "+=60px",    autoAlpha: 0}, "-=0.7").from("#ball3", 1, {    y: "+=60px",    autoAlpha: 0}, "-=0.7").from("#ball4", 1, {    x: "-=60px",    autoAlpha: 0}, "-=0.7");

其中 tl.from(target, duration, vars, position) 等同于 tl.add(TweenLite.from(target, duration, vars), position); ，这里的 position 参数指定动画在时间轴上的位置，默认为 +=0 也就是取前一个动画的结束点。以上的 -=0.7 就是相对这个位置再提前0.7s，这样就让动画互相之间有了重叠，看起来更连贯流畅一些。

效果：

时间轴像这样：

时间轴控制

把多个动画装进时间轴的重要作用是，可以当做一个整体进行控制和调整。时间轴的这些方法类似TweenLite：

// 在1s时间进度位置暂停tl.pause(1);// ... （和前面tween一样）// 跳转到50%进度处tl.progess(0.5);

相同动画的简便方法

如果多个元素的动画是一样的，而且它们需要有规律地安排在时间轴的不同位置，那么非常适合用 staggerFrom() 、 staggerTo() 及 staggerFromTo() 。例如：

tl.staggerFrom(["#ball1", "#ball2", "#ball3", "#ball4", ], 1, {    scale: "-=0.5",    autoAlpha: 0}, 2);

这样使用数组，就可以同时选中多个元素。

效果是：

可以看到，每一个元素按照顺序依次执行动画，间隔2s。

TimelineMax和TweenMax

如果你觉得还需要一些动画和时间轴的更高级功能（如同一动画间隔重复），可以选择TimelineMax和TweenMax。它们并不需要更多的学习成本，如字面意思所示，TweenMax是TweenLite的升级版，拥有其全部特性，只是增加了一些额外的高级控制。它们的语法完全一致，你可以试试用全局搜索把所有TweenLite替换成TweenMax，不会有任何影响。TimelineMax和TimelineLite的关系也是如此。

补充信息

浏览器兼容性

可以到IE6（使用jQuery1.x的选择器）。

另外，不要期望在不支持的浏览器上做3d transform动画。

指定默认缓动

如果你大部分动画都使用同一种缓动函数，那么用 TweenLite.defaultEase 会很方便，比如修改为 Expo.easeOut ：

TweenLite.defaultEase = Expo.easeOut;

动画结束后清空style属性

默认情况下，执行过动画的元素会留下 style 的内联样式，如果你担心这可能造成额外影响，可以设定 clearProps 参数清空它：

TweenLite.to("#ball1", 2, {    x: 200,    clearProps: "all",    autoAlpha: 0});

如果只需要清理个别样式，单独写出来即可，如 clearProps: "opacity" 。

autoAlpha的作用

前文反复用到的 autoAlpha 并不是css属性，而是GSAP给定的一个特殊属性。 autoAlpha 是 opacity 和 visibility 这2个css属性的结合。

为什么要结合起来呢？一般来说， opacity 为 0 的不可见元素，我们会认为它也是不可交互的（比如 onclick 不触发），因此附加 visibility: hidden 可以保证这一点。GSAP会正确处理动画过程中这2个css属性的变化。

备忘单

GSAP有一份包含丰富参考代码的 备忘单 （Cheat Sheet），可以帮助你节约时间。

结语

GSAP里的很多概念和API设计可以追溯到flash时代。虽然flash在今天已经很少被使用，但“flash动画”一词能够深入人心是有它的原因的。

GSAP是专业动画库，在大部分情况下，它也具备更好的动画性能。如果你打算在网页里制作一个动画大片，那你现在应该知道什么可以帮助你了 :) 。