2種類
状態:試行錯誤中
閲覧数:1,989
投稿日:2015-05-15
更新日:2015-05-15
実装手段は下記何れか
・CSS JS
比較表
・CSS JS
比較表
| - | CSS | JS |
|---|---|---|
| 難易度 | 易しい | 難しい |
| 出来ること | 限られている | CSSでは実装出来ないことでも可能 |
SVGアニメーションの種類
3種類
アニメーションだからと「一括り」にして考えてはいけない
・同じように見えて、実装方法は全く異なる
アニメーションしているように見せかけるためには？
・アニメーション内容に応じて、どのSVG機能を使用するかを、知ることが大事
よく使用するアニメーション一覧
| - | 概要 | 備考 |
|---|---|---|
| 線を引く | stroke-dasharrayで点線や破線のパターンを指定。stroke-dashoffset プロパティで点線の開始位置を指定 | - |
| pathに沿ってsvgオブジェクトを移動させる | - | - |
| pathに沿ってテキストを移動させる | - | -能 |