Javascriptを使ってCSSでアニメーションさせる。
アニメーションはCSSに任せる
Javascriptでは上手に書かないとアニメーションの動作が滑らかにならないので、アニメーションはCSSに任せる、という方針です。
とてもちょうどいいMDNドキュメントがあったのでそちらを読めば、大体分かると思います:
これだけで終わるのはよろしくないので、要点となるAPIとサンプルコードを下に載せます。
jsでスタイルシートにアクセス
Javascriptでスタイルシートを変更する流れになります。
function addAnimationIntoElement(elem, animPropValue, keyframes) {
elem.style["animation"] = animPropValue;
if (document.styleSheets && document.styleSheets.length) {
document.styleSheets[0].insertRule(keyframes, 0);
} else {
var s = document.createElement("style");
s.innerHTML = keyframes;
document.getElementsByTagName("head")[0].appendChild(s);
}
}アニメーションは、CSSのanimationを使用して、@keyframesも使います。それぞれの値はJavascriptで動的に指定します。
これらの値を、スタイルシートが存在すれば1つ目のスタイルシートに挿入します。存在しなければ、styleタグを生成し、それに挿入します。
新しいめなブラウザでCSSがあれば1つ目のif文の中身が実行されます。insertRuleではインデックスとして0を指定しているので、スタイルシートの先頭にkeyframes変数の中身が追加されていきます。
これだけであとはブラウザがCSS通りにアニメーションしてくれます。
サンプル
先のaddAnimationIntoElement()を使ったサンプルを掲載します。画像部分付近をクリックすると、アニメーションが行われるようにしました。クリックによって動的に開始時点と終了時点の座標を使用した@keyframesをCSSに追加しています。
おわり
サンプルの流れ星のつもりの画像が回転させながら動かすと金平糖みたいになってしまいました。雲っぽいものも動かせばよかったですね。
スタイルシートに追加した@keyframesなどは削除もできるので、インデックスの管理をしっかりしていれば、自在に操ることもできると思います。document.styleSheetsに対応していないブラウザまでも対応しようと思うと結構面倒だとは思います。（Polyfillはあるかもしれません。）
規模が大きくなるならReactなどのフレームワークでアニメーション系のライブラリを使用したほうがいいです。
短いですが以上です。
コメント