JavaScript入門 animation で遊んでみよう
ブラウザ上でアニメーションをつくるというと、ひと昔前はjQueryのようなライブラリーを使う必要がありました。
現在はブラウザに標準で実装されている機能を使うことが可能です。
※ただし、まだ実験的な機能なので、本番環境で使う時はサポートしているブラウザをチェックする必要があります。
今回はこちらを参考にして簡単なアニメーションを実装して遊んでみます。
div要素を動かしたり、色を変えたりしてみましょう。
HTMLとCSSとJSファイルの用意
まずはHTMLとCSSを用意します。
index.htmlとanimation.cssを作成します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>web test</title>
<link rel="stylesheet" href="./animation.css" />
</head>
<body>
<div class="move-div"></div>
<script src="animation.js"></script>
</body>
</html>
.move-div {
width: 100px;
height: 100px;
background: lightpink;
}
あと、animation.jsというファイルを作成します。今は空のままでOKです。
以下のようなピンクの四角が表示されます。
JavaScript実装
横に動かす
とりあえず、この四角を3秒かけて右に500px動かすコードを書いてみます。
const moveDiv = document.querySelector('.move-div')
moveDiv.animate({ transform: 'translateX(500px)' }, 3000)document.querySelector で要素を取得してから、animate() を実行しています。
第一引数のオブジェクトがアニメーションさせる設定で、第二引数の3000がアニメーションする時間です。
色を変えながら横に動かす
色を変えながら横に動かしてみます。(以下、要素を取得するコードは省略しています。)
moveDiv.animate(
{ transform: 'translateX(500px)', background: 'lightBlue' },
3000
)アニメーションの終了地点で止めてみる
上記のアニメーションは、終了するとdivが元の位置に戻ってしまいます。
アニメーション終了地点で止める実装は以下です。
moveDiv.animate(
{ transform: 'translateX(500px)', background: 'lightBlue' },
{ duration: 3000, fill: 'forwards' }
)animate()の第二引数には、オブジェクトを渡すことが可能で、より詳細な設定をできます。
上記の例のようにfillに’forwards’を指定することでアニメーション終了地点で止めることができます。
行ったり来たりさせる
2往復させてみます。
moveDiv.animate(
{ transform: 'translateX(500px)', background: 'lightBlue' },
{ duration: 3000, direction: 'alternate', iterations: 4 }
)animate()の第二引数のオブジェクトでどのような設定ができるかはこちらに記載があります。
段階的なアニメーション
これまでanimate()の第一引数にはオブジェクトを渡していましたが、オブジェクトの配列も渡すことが可能です。
これによって段階的なアニメーションが実現できます。
以下のコードはどのようなアニメーションになるでしょうか。
moveDiv.animate(
[
{ transform: 'translateX(0px)' },
{ transform: 'translateX(200px)', background: 'lightBlue' },
{ transform: 'translateX(500px) scaleX(2)', background: 'lightYellow' },
],
{ duration: 3000, direction: 'alternate', iterations: 4 }
)