スケーラブルベクターグラフィックス（SVG）アニメーションの考察
今日私達は私達の議論を続けるつもりです スケーラブルベクターグラフィック（SVG）, そして今回は一緒に仕事をするつもりです SVGアニメーション. SVG Animationは比較的簡単なので、この記事では基本から説明します。.
基本的な実装
SVGのアニメーションは、
上記のコードスニペットからわかるように、次のコードを追加します。
属性名：この属性はどの要素の属性がアニメーションで影響を受けるかを指定します.
から：この属性はオプションです。正確な値を指定するか、それをそのままにしてもかまいません。.
に：この属性はアニメーションの方向を指定します。の指定値に応じて 属性名, 結果は異なる場合があります。しかし、この例では、 高さ.
ちょっと：この属性はアニメーションの長さを指定します。この属性の値はClock Value Syntaxで表されます。例えば, 02時33分 2分33秒 3時間 これは3時間に相当しますが、それほど長い時間は必要ないので、期間を指定します。 3秒 または3秒
同じことが r）.
- 基本実装デモ
移動要素
SVG要素を移動する際には、要素の座標をターゲットにするだけです。 バツ そして よ;
上の例では、長方形を 0 に 200 3秒以内に、長方形は左から右へ水平に移動して表示されます。また、あなたが注意深く見れば私達はまた別の属性を 塗りつぶし.
塗りつぶし ここの属性は他のSVG要素のように背景色とは関係ありません。この属性は、デュレーション終了後のアニメーションの動作を指定します。この例では 凍結する 影響を受ける要素なので、アニメーションの終了位置に留まります。.
それも同様に動作します cx または cy, そのようです：
- 移動要素のデモ
複数の属性をアニメートする
これまでのところ、1つのアトリビュートをアニメートすることだけをターゲットにしていますが、一度に複数のアトリビュートをアニメートすることも可能です。以下の例は、その方法を示しています。
ご覧のとおり、それは同じように機能します。
- 複数の属性のデモ
道をたどる
前回の投稿で SVGでテキストを扱う, テキストをパスに流す方法を示しました。で同じことをすることも可能です SVGアニメーション, パスをたどるように要素をアニメートすることができます。これが例です.
パスは、 id と
これで終わりです。では今度はそれを実際に見てみましょう。
- パスデモをたどる
変換
次のような変換も使えます 規模, 翻訳する そして 回転させる アニメーションのために、そしてそうするために私たちは使用します
SVGの変換はCSS3と同様の原則を共有しています、そしてCSS3 2D変換についての私達の以前の記事でそれをかなり包括的にカバーしました.
- 変換デモ
最終的な考え
SVGアニメーションの熟練度に応じて、このようなものを作成できます。.
Flash AnimationよりもSVG Animationを使用する利点の1つは、サードパーティ製のプラグインに頼らず、Flashよりもはるかに高速であることです。アドビがAndroidでのFlashサポートを停止した後は、次のWebサイトでアニメーションを配信するためにこのアプローチを試してみることをお勧めします。.
その他の参考文献
- SVG Animateのドキュメント
- 上級SVGアニメーションテクニック
- デモを見る
- ソースをダウンロード
