JavaScriptでアニメーション作成

本日の成果

今日はJSでアニメーション作成をしました。
作成したアニメーションがこちら

実際のJSコード

const container=document.querySelector(“.container”);
for (let i =0 ; i <= 50 ; i++) {
  const blocks= document.createElement(“div”);
  blocks.classList.add(“block”);
  container.appendChild(blocks);
}
function AnimeteBlocks(){
  anime({
    targets:”.block”,
    translateX:function(){
      return anime.random(-800,700);
    },

    translateY:function(){
      return anime.random(-500,500);
    },

    scale:function(){
 　 return anime.random(1,3);
    },
　　 duration:2500,
　　delay: anime.stagger(15),
　　complete:AnimeteBlocks,
　　 });
　}

解説

HTMLでdivタグにcontainerのクラスを付けておきます。JSでcontainerを指定し、その中にcontainerの子要素となるクラス名blocksのdivタグを５０個作るfor文（ループ文）を記入します。CSSでblocksを丸くするよう編集しました。

animeJSでanime.min.jsをダウンロードし、HTML/CSSと同じフォルダー内に置きます。HTMLでanime.min.jsを読み込みAnimeteBlocksという関数を作ります。こちらで縦方向の動き幅・横方向の動き幅を指定し、ランダムに動くよう指定します。

そしてscaleの関数も作り大きさもランダムになるよう指定し、動く間隔・ディレイを指定。最後にアニメーションが終了した際に繰り返すように complete:AnimeteBlocks,を入力します。

これでランダムな大きさの円がランダムに動くアニメーションが完成しました！

しかし、このままだと画面が縦横に広がってしまうのでCSSでbodyに対してはみ出た部分を隠すようにoverflow:hiden;を入力しました。

参考

今回のアニメーション作成で、今までは概念的な部分しか知らなかったJSを実践で扱うことができました。このアニメーションを作成した後、ボタンを押すとアニメーションが動くように変更したりもしてみました。まだまだJSについて理解が浅いですが、実際にコードを書くことを通して理解を深めていきたいです。

今回参考にさせてもらったのはプログラミングチュートリアルのShinさんの動画です。

作成したサイト一覧

作成したサイトの記事一覧になります。