TweenLiteを使って軽快なアニメーションを作成しよう

どうも、イソップです。

突然ですが、JavaScriptのアニメーションライブラリは何を使っていますか?

最近は、滑らかに動くvelocity.jsTweenMaxが世界的にも人気です。
ぼくもどちらも試しましたが、非常に使い勝手が良くて、気持ちの良い動きを実装できるライブラリでした。

しかし、ぼくのイチオシは何と言っても、
TweenMaxの軽量版のTweenLiteなんです。

TweenLiteは、TweenMaxの機能を削ぎ落としてファイルサイズを小さくしたライブラリですが、
もちろんそのままでも使えて、プラグインを足せば、イージングやTweenMaxの機能も使えます。

最近個人的に好んで使っていて、DOMアニメーションはもちろんのこと、SVGアニメーションの実装にも大活躍しています。

今日は、そんな溺愛中のTweenLiteを紹介します。

TweenMax、TweenLiteとは

TweenMaxとTweenLiteは、GreenSock社が開発している、JavaScriptアニメーションライブラリです。
Flashの経験がある人は馴染みがあるかもしれません。ActionScript版のライブラリも提供しています。

何と言っても、動きの軽快さが特徴で、個人的にはvelocity.jsより軽く動いてるんじゃないかと思えます。

百聞は一見にしかず。 とにかく公式サイトのショーケースで、実際の動きを観てもらうのが早いです。
Examples & Showcases

どれもこれも秀逸なサイトばかりで、ショーケースに登録してあるサイト全部紹介したくなっちゃいますね!

TweenMax、TweenLiteの違いは?

TweenMaxとTweenLiteの違いは、使える機能の違いです。

DOMアニメーションに必要な機能を持っているTweenMaxに比べて、TweenLiteは最低限のアニメーションの機能しか持ちません。

例えば、JavaScriptのアニメーションではCSSのプロパティを書き換えて動きを表現しますが、
TweenLiteはその機能も持ち合わせておらず、オブジェクトの数値を連続的に変更することくらいしかできません

なんで、こんなライブラリがイチオシなんだって思いますよね?
実は、公式に用意されているプラグインを使うことで、TweenMaxに近づけてより使いやすくすることができます。

TweenLiteではプラグインが用意されている

プラグインを使えば、CSSの値の書き換え、HTML属性値の書き換え、スクロールポジションのアニメーションなどなど。
必要なものは後から自分で付け足すことが出来ます。

なんか面倒だな、と思った人は、初めからTweenMaxを使いましょう。

用意されているプラグインは以下のとおりです。

  • CSSPlugin
    CSSプロパティのアニメーションが指定できる。
  • CSSRulePlugin
    スタイルシートで定義したCSSプロパティをアニメーション可能。:before、:after擬似クラスも変更可能。
  • BezierPlugin
    ベジェ曲線を使用可能にする。
  • AttrPlugin
    HTML属性値のアニメーションを可能にする。
  • DirectionalRotationPlugin
    ローテーションの方向指定を、clockwiseなどのプロパティで指定可能にする。
  • TextPlugin
    テキストの変更を可能にする。
  • ScrollToPlugin
    スクロールポジションのアニメーションを指定できる。
  • RaphaelPlugin
    Raphael(SVG描画ライブラリ)のオブジェクトを扱うことができる。
  • ColorPropsPlugin
    カラーコードの変換を可能にする。
  • EaselPlugin
    CreateJSのEaselJSのプロパティを扱うことができる。
  • RoundPropsPlugin
    アニメーション中の値を、四捨五入するプラグイン。
  • ModifiersPlugin
    定義したカスタム関数を、アニメーションサイクルのタイミングで実行する。

※TweenMaxには、上記のColorProps,CssRule,Easel,ScrollTo,Modifiers,Textプラグインは含まれていません。

ぼくがTweenLiteをオススメする理由

ぼくがTweenLiteをオススメする理由は、もちろんファイルサイズを抑えることができること。
使わない機能が多いことが許せないので、自分の好きなように機能を追加できるのがメリットだと思っています。

ファイルサイズの違いは、TweenMaxが112KB、TweenLiteが28KBと軽量です。(圧縮済みコード)

最近は、読み込み速度などにも気を使う場面が増えてきたので、TweenLiteが使いやすいわけです。

まとめ

ざっと簡単な説明でしたが、いかがでしたか?

次回から連載形式で、TweenLiteを使ったアニメーションの実装方法を紹介していこうと思いますので、お楽しみに。

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.