ImageMagickとGreenSockを使用したレスポンシブスプライトアニメーション

CSSスプライトは新しいものではありません。 2004年にA List Apartで人気を博した瞬間から、ほとんどのWeb開発者のツールキットでは、シンプルなスプライトが主要な手法になりました。 しかし、スプライトの速度の利点は理解できるという事実にもかかわらず、現代のWeb開発におけるスプライトの使用についてはほとんど議論されていません。 原則は同じままです。複数の画像を組み合わせて1つの「メイン」グラフィック要素にし、そこから特定の部分のみを表示するというものです。



この記事では、軽量で、モバイルデバイスで、さらにインタラクティブに表示されるレスポンシブなCSSスプライトアニメーションを作成する簡単な方法を見ていきます。 特別なグラフィカルエディタは必要ありませんが、CSSとJavaScriptを少し理解するだけです。 始めましょう。

スプライト作成

スプライトはビデオゲームの世界を去ったので、レガシーに敬意を表し、ストリートファイターのリュウをアニメートします。 もちろん、オリジナルはカプコンのものです。



アニメーションの各フレームを1つの画像に結合する必要があります。 スプライトの作成に役立つツールは多数あり、そのほとんどがヘルパースタイルシートを生成することもできます。 コンパスの組み込みスプライト機能は非常に効率的であり、 SpritePadはWebベースのジェネレーターの優れた例です。 ただし、ここでは単純なコマンドラインで十分です。



ImageMagickは、画像処理用の「スイスナイフ」であり、無料で公開されている画像管理ツールであり、画像の結合など、非常に時間がかかるタスクの自動化に最適です。 ImageMagickは、ほぼすべてのオペレーティングシステムでも使用できます。 MacユーザーはHomebrewを介してインストールでき、Windowsの支持者は公式サイトからインストーラーをダウンロードでき、Linuxファンはおそらく私なしで何をすべきかを知っているでしょう。



一連のPNGファイルと同じサイズのアニメーションのフレームをフォルダーに保存します。 コマンドラインターミナルを呼び出し、画像が保存されているディレクトリに移動（cd）して、次のコマンドを実行します。

convert *.png -append result-sprite.png
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコマンドは、ImageMagickにディレクトリ内のすべての.PNGファイルをリンクし（「*」は特殊文字であるため）、「result-sprite.png」と呼ばれる1つの完全なスプライトにリンクします。 これは、すべてのフレームを順番にループするように位置を変更することで、アニメーション化する要素のCSSで背景画像として使用されるグラフィック要素です。

純粋なCSSアニメーション

簡単に始めて、CSS3キーフレームアニメーションを使用してスプライトをアニメーション化します。 基本的な構文に慣れていない場合は、Smashing MagazineのLouis Lazarisの記事をご覧ください 。 各フレームを順番に使用して、要素の垂直背景配置を0％から100％（上から下）にアニメーション化します。



アニメーションを標準の動作として1つの連続したシーケンスで実行させると、フレーム間でスプライトが使用され、錯覚が崩れます。 それでも、steps（）関数を使用して、表示されるキーフレームの数を制御できます。 background-positionはパーセンテージとして決定されたときに有効であるという事実のため、アニメーションのフレームの総数よりも1つ少ないステップ数を設定する必要があります。



CodePenでこのコードを試して、意味を成します。



要素の幅と高さがフレーム全体に明確に対応するように、また前後のフレームのリリースを避けるために決定したことに注意してください。 略語を使用して、アニメーションの反復回数（animation-iteration-count）を「無限」、アニメーションの継続時間（animation-duration）-3.5秒に設定したため、Ryuがコンボ「hit」をスローすることが判明しました時間がなくなる前にスローヘイデン。



はい、彼は理想からはほど遠い。 Ryu要素の高さを変更するか、スプライトにbackground-sizeを適用すると、エフェクトが壊れます。 アニメーション化された要素はまだレスポンシブではなく、ピクセルベースの明確なサイズに依存しています。

レスポンシブにする

アニメーションスプライトのサイズを自由に変更する場合、2つのオプションがあります。 両方のオプションの鍵は、特定のサイズではなく、正確なアスペクト比にスプライトを依存させることです。 正しく増減するように、比率を維持する必要があります。



最初のオプションは、スプライトの背景サイズを要素の幅の100％に設定し、要素の幅と高さをピクセルからemに変換し、それに応じてベースフォントサイズ（font-size）を変更します。 これは、目的の効果を達成するのに役立ち、ほとんどの場合に機能しますが、実際の流動性は得られません。



2番目のオプションは、Hinzeによる純粋なCSSに基づく固定CSSアスペクト比手法を使用することです。これは、任意のサイズで要素の比率を保持する擬似要素のパーセントインデントを使用します。 このアプローチは以下のデモで使用され、スプライトに70％のフロー幅を与えます。 応答性リュウ 。



これは、応答性の高いフレームごとのアニメーション効果を実現する、軽量でモバイルフレンドリーな方法です。 ブラウザはCSSアニメーションを強力にサポートしているため、唯一の制限要因はCSS3キーフレームです。 適切なプロバイダープレフィックス-webkit-を含めると、IE10以降を含むすべての最新ブラウザーで効果が機能します。

Javascriptアニメーション

そして、CSS3キーフレーム構文を使用するときに基本的に可能なアニメーションをより正確に制御したい場合はどうでしょうか？ 1つのループアニメーションではなく、1つの複雑なシーンに複数のスプライトを含め、トリガーと時間関数をスクロールバーの位置にバインドするとします。



これを可能にするには、 GreenSockアニメーションプラットフォームのフルパワーとJan Pepkeの優れたScrollMagicライブラリを使用して、JavaScriptを使用してスプライトをアニメーション化する必要があります。 この素晴らしい組み合わせに慣れていない人にとっては、公式のScrollMagic デモは素晴らしいスタートです。



これらは、一連のレッスン全体を作成するための強力なツールです。 例として、 ScrollMagicがどのように機能するかについて詳しく説明しないために、利用可能な時間関数のいくつかを示します。 スプライトの基本原則は、CSSアニメーションの場合と同じです。



はじめに、特定のスクロール位置で2秒のアニメーションを呼び出しましょう。 最後のフレームで終了し、逆方向にスクロールするときに逆の順序で再生する必要があります（同時に再生する場合でも）。 私たちはビデオゲームのテーマに固執し続け、古典的なWestwood Studios戦略のスプライトを使用します-Red Alertは現在無料でリリースされています。



デモンストレーション



上記のemベースのサイジング方法を使用していることに注意してください。 スプライトを増減してフォントのサイズを変更してください。 要素の背景の垂直位置を100％に設定してTweenMax.toをdoubleに定義し、SteppedEaseメソッドを使用して、フレームごとの効果を実現しました。



さらに一歩進めましょう。 スクロールバーを再生スライダーとして使用して、アニメーションをスクロール位置と同期させます。



デモンストレーション



スプライトは、アニメーションの継続中は固定位置にとどまります。これは、ユーザーのスクロール動作によって制御されるようになりました。 この効果を実現するために、ScrollMagic.Sceneプロパティを1,500ピクセルの長さに設定し、setPinメソッドを使用して親要素を修正して画像を完成させました。 これらの手法の詳細な説明は、ScrollMagic Webサイトのドキュメントに記載されています。



JavaScriptベースのスプライトアニメーションのブラウザサポートは、CSSのみのバージョンよりも優れています。 ScrollMagicとGreenSockは、IE 9+を含む最新のすべてのブラウザーでサポートされており、ブラウザーのプレフィックスと欠点が自動的に処理されます。 モバイルサポートも優れています。 これらの手法は、外出先での再描画などの特別な回避策やスクロール速度を失うことなく、iOS 8以降で動作します。

おわりに

レスポンシブCSSスプライトと高度なスクロールアニメーションの組み合わせがどのような可能性を提供するかを、表面的には概説しましたが、他の人たちに実験を始めてもらいたいと思います。



そして最終的に、レイチェル・セスが言ったように、「動物は責任を持って」。 何かをアニメーション化できる場合、アニメーション化する必要はありません。 そして、あなたが本当にアニメーションを選んだのなら、それを意識的に、美しく、合理的にやってください。