SVGアニメーション – Web Animations API を使う – モーフィングアニメーションについて
SVGを使用したモーフィングアニメーションを試します。
以下サンプルです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<svg width="300" height="250">
<path
d = "M 10,10 90,150 120,20 Z"
stroke = "#eeeeee"
stroke-width = "1"
fill = "#dddddd"
>
<animate
attributeName = "d"
repeatCount = "indefinite"
dur = "3s"
to = "M 130,40 150,180 160,40 Z"
>
</path>
</svg>
</body>
</html>
画面にアクセスすると、SVG画像がモーフィングします。
考え方としては、
<path
d = "M 10,10 90,150 120,20 Z"
stroke = "#eeeeee"
stroke-width = "1"
fill = "#dddddd"
>
で指定したSVG画像に対し、
<animate
attributeName = "d"
repeatCount = "indefinite"
dur = "3s"
to = "M 130,40 150,180 160,40 Z"
>
上記で指定した「to」のパス情報に3秒かけて、パスの変化をしている。
ということになります。
モーフィングする際のパス情報は、開始時と終了時で同じ数のパスにする必要があります。
attributeNameのパラメータにはサンプルではパスを示す「d」を指定していますが、
「d」以外の値(例えば色の塗りつぶし情報等)でも指定可能です。