javascript（ライブラリanime.min.js の試し）
■javascriptのアニメーションのライブラリを使う。
モグラたたきのアプリで画像を差し替えてアニメーション風にしていたけど、javascript のアプリでanime.js といったものがあったので、このライブラリを少し試してみる。
とりあえず簡単なサンプルを。
適当なdivタグにクラス名をつけて、cssで高さ、幅、色を指定、これを対象にanime.min.js ライブラリを使う。その html、css、javascript が下。javascript の中で anime.min.js ライブラリを使用している（"anime({"のコード）。
html
<html>
<head>
<meta charset="utf-8">
<link href="aniSample01.css" rel="stylesheet" type="text/css">
<script src="../anime.min.js" defer></script>
<script src="./aniSample01.js" defer></script>
</head>
<body>
<div class="aniSamplePic01"></div>
</body>
</html>css
.aniSamplePic01 {
width: 200px;
height: 120px;
background: Blue;
}javascript
anime({
targets: '.aniSamplePic01',
translateX: 300,
translateY: 300,
duration: 4000,
direction: 'alternate',
loop: true,
easing: 'linear'
});実行結果が下。
divのコンポーネントが縦、横で300分だけ行ったり来たりを繰り返す。
とりあえず動くところまで確認した。単純なコンポーネントの移動だけど、他にもどんなことができるか見てみる。
