12周年記念パーティ開催! 2024/5/10(金) 19:00

Snap.svgで快適SVGアニメーション

全6回

jQueryと同じような感覚で使え、さらにjQueryでは実現することのできないSVGの細かな操作が可能なライブラリSnap.svgを解説します。

最終回 Snap.svgのイベント

インタラクティブなWebページのUIやアプリケーションを作る上で欠かせないイベント管理ですが、Snap.svgにはこれらも豊富に揃っています。これらの使い方を理解しましょう。

第5回 さまざまな要素取得

Snap.svgには要素を生成したり、任意の要素を簡単に取得できる機能があります。Webアプリなどの実務での実装には欠かせない基本となりますので、しっかりとおさえておきましょう。

第4回 メソッド、オプションの活用

Snap.svgのアニメーションには、イージングなどのオプションや、特殊なケースへの対応のためのメソッドが用意されています。自由度の高いアニメーションには、これらの活用が欠かせません。

第3回 さまざまなアニメーション

Snap.svgの機能を使い、色のアニメーション、パスモーフィング、座標変換などを利用した実装を解説します。Snap.svgはSVGのアニメーション可能な属性を簡単に操作することができます。

第2回 基本的なアニメーション

Snap.svgを用いて、SVGらしいアニメーション表現とその実装を解説します。今回は、その中でも基本的な、数値で設定できるSVGの属性を利用したアニメーション表現にフォーカスします。

第1回 Snap.svgとは

jQueryと同じような感覚で使え、さらにjQueryでは実現できないSVGの細かな操作が可能なJSライブラリSnap.svgを解説します。SVGの特徴、実装手段を検討し、Snap.svgの位置付けを知りましょう。