VelocityとPixiの手抜きアニメーション。こうして花を咲かせましょう

Posted 2月 20th, 2016 by codechord. 1 Comment

160220

この記事は「[JS/CSS/SVG] Webとアニメーションの様々なありかた」という勉強会用の発表資料です。
アニメーションまわりのプラグインを紹介したものの、すごく駆け足だったので、あらためて、ご紹介します。

なお、ここで紹介するサンプルのデモは、githubにソース置いておきます。
（スライド無いです）

CSSで連続アニメーション

これまでは、javascriptを利用しないかぎり、CSSのみで、複数のDOMが連続してアニメーションするといった制御ができませんでしたが、IE10+を前提とする場合は、CSSのアニメーションの完了イベント「transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd」を取得出来るようになり、ほとんどCSSのみでのアニメーションができるようになりました。
jQueryなどのJavascript Animationは、DOMのStyle属性を操作することになりますが、CSSのtransitionによるアニメーションは、DOMを書き換える必要はなく、Classを追加するだけでアニメーションさせることになりますので、DOMレンダリングのコストがかからず、パフォーマンスが良くなります。(Codepenのデモはページ中段ぐらいにあります）

<style>
    #anime1, #anime2, #anime3{
        transition: all 1s ease;
    }
    #anime1.anime-start,
    #anime2.anime-start,
    #anime3.anime-start{
        width: 100%;
        color:#CC0000;
        background-color:#CC9999;
    }
</style>
<script>
//
var TRANSITIONEND = "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd";

$("#anime1").on(TRANSITIONEND, function(){
    console.log('#anime1のアニメーション終了');
    $("#anime2").addClass("anime-start");
});
$("#anime2").on(TRANSITIONEND, function(){
    console.log('#anime2のアニメーション終了');
    $("#anime3").addClass("anime-start");
});
$("#anime3").on(TRANSITIONEND, function(){
    console.log('#anime3のアニメーション終了');
});
</script>

とはいえ、jQuery animationの方が、stepなどの細かな調整が可能なので、使いようにはなります。

jQuery.animateなら、Velocity.jsで高速化

jQuery animationを使うことになった場合、jQuery animationを高速化するライブラリとしてVelocity.jsが有名です。使い方は簡単で、ほとんどjQuery animationと変わりません。何故高速化されるのかは調べていません。

// jQuery animationの場合
$("#xxx").animate({width:'100%'},1000);
// Velocity.jsの場合
$("#xxx").velocity({width:'100%'},1000);

VMDブックマークレット for Velocity.jsで手抜き

VMDブックマークレットプラグイン（上手くリンクが飛びませんので「Plugins: VMD」とページ内検索してくだい）を使うと、ブラウザ上で、任意の要素に対してアニメーションのシミュレーションができます。Developer toolsなどでCSS編集できますがそんな感じです。
シミュレートしたコードをconsoleのログに出力もしてくれるので、そのまま使えてすごく便利。
説明が難しいので、動画を見てもらった方が早そうなので、動画をみてください。
最初から2：00ぐらいまでが基本的な操作。
3:00から3:15ぐらいまでが、consoleにコードを生成するサンプル。

ね。

ね。じゃねーよ。

CSS/Javascriptのパフォーマンスのチェック

cssアニメーション、jQeury animation、Velocity.jsのパフォーマンスチェックデモです。
CSSアニメーションが軍配があります。圧倒的に。
別ウィンドウででも開いてください。cssアニメーション、jQeury animation、Velocity.jsのパフォーマンスチェックデモ

See the Pen Demo sakura animation (style attribute) by tomothumb (@tomothumb) on CodePen.

上記で触れたとおり、DOM操作は、なかなかの重たい処理だから、極力控えるべき。重たいParallaxなんかはDOMのstyle属性ゴリゴリ変更しまくり。しかもでかい画像を。I hate it!

Canvasでパフォーマンスアップ

さて、次のケースでは、CSSでもなく、場合に寄っては、canvasを使うと圧倒的に快適になる例。

今回は、PIXI.jsを選択。PIXI.jsはWebGLのAPIを利用し、WebGLでレンダリング。非対応ブラウザの場合は自動的に通常のContext2Dにフォールバックしてレンダリングするというすぐれもの。同等のライブラリとしてはCreate.js/Easel.jsが有名ですが、その比較はこちらの記事に非常に解りやすく解説されてる。

今回なんでPIXIを利用するかというと、Pixi Particlesというパーティクルの生成ライブラリがすごく便利だったからその紹介として。

花吹雪をjavascriptでちらせてみる。

デモをご覧ください。
http://codepen.io/tomothumb/pen/GoaVPb/

See the Pen Demo sakura animation (style attribute) by tomothumb (@tomothumb) on CodePen.

ソースの解説はしませんが、imgタグのオブジェクトを生成して、styleのプロパティを毎フレーム変更するということをしています。
個数が多くなると極端に重くなります。上述の通りDOM操作はコストがかかるというところです。

花吹雪をcanvas(WebGL)でちらせてしてみる。

こちらのデモが、PIXI & Pixi Particlesのライブラリを利用した例です。
花吹雪の個数は断然多いですが、スムーズに動きます。スマホでもサクサクです。
http://codepen.io/tomothumb/pen/VeOogq/

See the Pen Demo sakura animation (style attribute) by tomothumb (@tomothumb) on CodePen.

パーティクルエディタがすごい

この「PIXI & Pixi Particles」は、次のオンラインジェネレータで生成したもの。
http://cloudkidstudio.github.io/PixiParticlesEditor/
これがまたすごい。オンライン上から、JSON形式で設定を書出せ、読み込め、修正もなんでもできてしまう。
JSの使い方はgithubのサンプルソースをご参照。

もう、雨だって、雪だって、泡だって、表現できます。
このシーズンだと、花粉だって、黄砂だってへっちゃら。

なお、PIXI自体は、動画処理や、画像合成、マスク、スプライトなどいろいろできますので。

その他便利なライブラリ

最後に、幾つか、全部定番だけど、すごく助かってるライブラリを紹介しておわります。

タイポグラフィ：Blast.js
（段落ごと、単語ごと、文字ごとに分割できる。Velocityと同じ作者）
Parallax：Scroll Magic
（パララックス、パラパラアニメ、ベジェアニメ、などなど。）
データビジュアライゼーション：D3.js
（D3.jsを使われたr2d3.usがすさまじい。）
SVG：Snap.svg

ちなみに、Polymerとかの、Web ComponentsとかShadow DOMとか呼ばれるのは、好き放題し過ぎ感があって、手を出しにくい。

以上、疲れた。