876 views
この記事は最終更新から 1837日 が経過しています。
1. やりたいこと
前回の投稿 (79) 【SVG画像】WEBブラウザにSVG画像を表示する。 では、自作のベクタ画像(SVG画像)ファイルを WEBブラウザ上に表示するまでをやってみた。
今回は…
WEBブラウザ上に表示させたベクタ画像を CSSを使ってアニメーションさせたい!
2. やってみる
CSSを使用したアニメーションの手順はラスタ画像の場合と同じだ。
CSSのパラメータを時間変化させることによりアニメーションを実現する。
(1) 移動させる。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>00080 demo1</title> <style> img#star{ width: 200px; position: absolute; left: 0; top: 0; /**/ animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-name: anim_star; } @keyframes anim_star{ 0% { left: 0%;} 100%{ left: 100%;} } </style> </head> <body> <img id="star" src="./svgimg1.svg"> </body> </html>
(2) 回転させる。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>00080 demo2</title> <style> img#star{ width: 200px; position: absolute; left: 0; top: 0; /**/ animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-name: anim_star; } @keyframes anim_star{ 0% { transform:rotate(0deg);} 100%{ transform:rotate(360deg);} } </style> </head> <body> <img id="star" src="./svgimg1.svg"> </body> </html>
(3) 移動+回転+拡大させる。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>00080 demo3</title> <style> img#star{ width: 200px; position: absolute; left: 0; top: 0; /**/ animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-name: anim_star; } @keyframes anim_star{ 0% { left:0%; top: 0%; width: 100px; transform:rotate(0deg);} 100%{ left:100%; top: 100%; width: 300px; transform:rotate(360deg);} } </style> </head> <body> <img id="star" src="./svgimg1.svg"> </body> </html>
※Microsoft Edgeだとなぜか表示されない… Microsoft IE11では表示されるのに。
3. 所感
IMGタグを使って SVG画像を表示した場合
「ベクタ画像の頂点座標を時間変化させて図形を変形させる」のような
ベクタ画像ならではのアニメーションが実現できない。
よって…
次回以降は、ベクタデータを時間変化させられるようなアニメーションの実現手段を学習したい。