【超丁寧】canvasアニメーション(Shooting Star)を画像の上で動かす【day128】

JavaScript

canvasをつかったアニメーション(Shooting Star)を画像の上で動かすのに苦戦したので、解決策をアウトプットします。

こんにちは。駆け出しコーダーのharuです。

*わたしについて*
2歳0歳の育児をしながら、22時〜2時にプログラミングを独学しています。
2020.5.11~学習スタート
2020.8.10~実務でコーディングしています
まだHTML/CSS(SCSS)/jQuery のよわよわです。これからもっと知識をつけていきたく、インプット・アウトプットを続けています。

普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけると泣いて喜びます!

【canvas】アニメーション(Shooting Star)を画像の上で動かす

今日は、ここ数日苦しんでいた #canvas沼 から一応帰ってきたのでアウトプットをしたいと思います。

・canvasって何?
・Shooting Starってどんなアニメーション?
・canvasのアニメーションを画像の上で動かしたい

という方の参考になる記事を書きたいと思います!

canvasって何?

まず、簡単にcanvasについてのアウトプットです。

canvasとは、

htmlの<canvas>タグと、JavaScriptを使って図形を描画する技術のことです。

たとえば、

  • 円や四角形などの図形
  • 画像とテキストを合成
  • 色や背景のスタイル、グラデーション

などさまざまなことができます。

それ、ふつうに画像や背景画像を使うほうが楽では?
→ canvasを使うメリットがある
・JSで描画するので画像に比べてデータが軽い
・ユーザーによって異なる画像を表示させること可能
・タイマーと組み合わせて、時間で変化する描画も可能
・WebGL(three.jsなど)を使い3Dグラフィックスも描画できる

canvasを使うには、

<!--html-->

<canvas id="id名" width="canvasの横幅" height="canvasの縦幅"></canvas>

以上のhtmlコードと、描写のコードを書いたJSファイルを</body>の直前に読み込むだけです!

線、円、四角形などは以下のコードを書くだけで簡単に描写ができます。

Shooting Star(シューティングスター)とは?

今回、実装したいShooting Startは 「3Dアニメーション」です。

hoverで軌跡がキラキラになる、とても綺麗なアニメーション↓

(引用:Codepen よりShooting Star )

3DアニメーションのためcanvasとJSだけではできず、WebGLという3Dを表示させる仕様を使います。

WebGLをそのまま扱おうとすると、とても高度で大変なので「three.js」と呼ばれるライブラリがよく用いられます。

こちらのアニメーションはすでに先人が作った完成品であり、今回はこちらに記載されているコードを使用させていただきます。 (こちらのJSのコード、エグいのでぜひ見てみてくださいw)

他にもcanvasを使ったアニメーションの完成品はたくさんあり、面白いです!

 

それでは次の項から、このcanvas + JS + three.js を使ったShooting Starのアニメーションを、画像の上で実現していきます!(画像の上ってのが難しかった......)

【丁寧な解説】Shooting Starを画像の上で実装する

手順に沿って実装すればOKです。

<canvas>タグ

まず<cavas>タグを使って、描写をする場所を作成します。

<body>
    <div>
        <canvas id="canvas" width="640" height="340"></canvas>
        <div class="img-flower"></div>
    </div>
</body>

まず<canvas>、下に画像のための<div>を作成します。

Natsumiさん(@nnnyan_tsu)の助言から背景画像の方が扱いやすかったため、imgタグ使っていません。ありがとうございます!

各種ファイル読み込み

①CSSファイル

<head>
<link rel="stylesheet" href="style.css">
</head>

②JSファイル

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.5/dat.gui.min.js"></script>
<script type="text/javascript" src="script.js"></script>

JSファイルの読み込みは、3つあります。完成JSコードを書くscript.jsと、あとの2つは必要なライブラリです。

【ライブラリCDNのURLを取得】

こちらのページのCodePen左下にある「Resources」をクリック

次の画面に書いてある、2種類のCDNをコピーして、</body>前に読み込む。

</body>前に記載するscriptの順番は、CDN→script.jsの順番です。
逆にすると、Shooting Starが機能しません。(ハマった)

JSコードをコピぺする

Codepenから、既存のJSコードをコピーして、script.jsにペーストします。

めちゃめちゃ長いコードです。全てコピーして貼り付けます。

CSS

div {
  margin-top: 30px;
  width: 640px;
  height: 340px;
}
.img-flower {
  position: relative;
  background-image: url("flower.jpg");
  width: 640px;
  height: 340px;
}
#canvas {
  display: block;
  position: absolute;
  z-index: 2;
}

CSSは以上のように書きました。画像は、backgroundで表示させます。

構造としては、

relative:画像
absolute:canvas

のように、画像の上にcanvasを重ねた状態です。absoluteにはz-index:2;を指定しました。

画像はこちらをo-danから拝借しました。

この上にhoverイベント載せたいのですが...

【現実】

どーーーん。わろた。真っ黒。w

ここからJSをいじっていきます。。

canvasの背景を透過させる

canvasの背景が真っ黒なので透過させて、relativeの画像が見えるように編集していきます。

これは、はなえさん(@kon_hanae)が教えてくださりました。ありがとうございます... !つよつよ!

こちらのリンクを参考にJSコードを変更していきます。

this.renderer = new THREE.WebGLRenderer({ 〜以降のコードを見てください。Ctrl + F で検索可能)

赤枠で囲った2箇所を変更します。

① alpha : true
②setClearColor(0x000000, 0 );

にそれぞれ変更してください。透過をtrueにして、カラーを透明にします。

表示を確認します。

おお〜!!canvasが透明になりました!!

open controlsタブとShooting Starの文字を消す

最後に見た目を整えます。

右上にツールタブopen controlsがあって邪魔なのと、アニメーションの最初にShooting Starというデモの文字が出てきてしまうのでこれを消していきます。

①open controls

この表示です。クリックすると、hoverイベントのカスタマイズができるドロップダウンが出てきます。。

Dev.ツールで確認すると、タブのclassが.dgなのでCSSでこちらをnoneにします。

.dg {
  display: none;
}

消えました!

② Shooting Starのデモ文字を消す

なんか最初に文字がカッコよく出てきてしまい邪魔なので消します。

JSのコードで、TEXT = "shooting Star" の箇所を探します。

赤枠の visible : { value : の部分を、もともとtrueなのでfalseに直します。上画像が訂正後です。

これで消えます。

完成です!

--------

three.jsについては、こちらが参考になります↓

 

 

あとがき

Twitterでひとりごとのようにブーブー言ったら、みんなが助けてくれました><感謝です。

本当は、この実装を同一ページに複数使いたいのですがそちらはうまくいきませんでした。。

Shooting Starでなければうまく行くと思うのですが、こちらのJSコードが複雑すぎる故難しいという結論に至りました。(もしわかる方がいらっしゃったらぜひ教えてください><)

しかし、canvas やthree.jsのさわりを知ることができてとても有益でした...!!

今日は以上です。

 

**Thanks:師匠「もりけんさん」(@terrace_tec)

もりけんさんのHPはこちら

タイトルとURLをコピーしました