本文へジャンプ

高校生からはじめる、Webアニメーション (1)

Posted by NAK

皆さん、こんにちは。NAKです。

はじめに

コロナの影響は引き続きありますが、緊急事態宣言が解除されました。
様々な企業が再開となりました。健康第一ではありますが、新しい出会いや経験ができることは喜ばしいことです。

学生の方は、新学期が始まったという方も多いのではないでしょうか?

例えば、こちらの公式。

※V(速度)、V0(初速度)、加速度(a)、経過時間(t)、S(距離)

※V(速度)、V0(初速度)、加速度(a)、経過時間(t)、S(距離)

筆者にとっては、とても懐かしい公式です。
高校1年生以上の方は、見覚えがある方もいるでしょう。

これは物理Ⅰで登場する、「等加速度直線運動」の公式です。
直線を一定の加速度で進む物体について、速度と距離を表した式です。

例えば、自動車を思い浮かべて下さい。

上段の式は、一定の加速度で進む物体は、時間が増すごとに速度が速くなります。

下段の式は、距離 = 速度 × 時間 から、上段の式を分解すると、算出することができます。

高校生ならできる! Canvasでアニメーションを作ってみよう

等加速度直接運動は、そのまま直線で加速度が一定に増す現象ですが、その中でもシンプルなもので、自由落下運動があります。

これは、初期速度は0の状態で、加速度は重力(g)の力で、地面に落下する現象です。

先ほどの数式で、初速度V0は0。aは重力(g)とすれば、解くことができます。

さて、今回は高校で学べる数式で、アニメーションを作ってみましょう。
(※今回はHTMLとcanvasがわかる想定で進行します。)

canvasのエリアをクリックすると、ボールが落下します。これは、先ほどの数式から描くことができます。
では、もっとリッチな動きにさせてみましょう!

※サイトを読み込んだ直後に実行するので、再生する場合は右下の「Rerun」ボタンを押してください。
※必ずcanvasの中央から、拡大するとは限りません。レスポンシブなど対応する場合は、改良してからご使用ください。

物体が左右に移動しながら自由落下運動をしています。地面に停止後、徐々に背景を表示するアニメーションです。
サイトのオープニングや個性的な演出をしたいときに、使えそうですね。

日常の「なぜ?」を意識してみましょう

アニメーションを作成するときは、Webの知識も必要ですが、何より「考える力」が大切です。
数式の羅列は難しく感じることもありますが、どのような現象が起こっているか考えると、容易に理解することができます。

ぜひ、皆さんも学校で学んだことをWebで表現してみてはいかがでしょうか。

Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
すべてのコンテンツ/プラットフォームを、ひとつのコンテンツ管理システムで。