簡単にできる３Dアニメーション【CSS&javascript】

　プログラムが自分の思う通りに動作した時、バグ（不具合）の原因が分かった時は嬉しいものです。まさにプログラマ冥利に、尽きました。その思いが強くて会社を辞めた後もプログラムを作りたいという気持ちに駆られました。
　丁度その頃（会社を辞める前か辞めた頃）HTML,CSS,javascript を使用したホームページを作ることが主流になってきました。その後、十年以上HTML,CSS,javascriptの勉強をしています。

　２０２２冬季北京オリンピックの感動も冷めやらぬ中、CSS と javascript を使用して３Dアニメーションを作ってみました。
設定をご自由に変更して「RUN」ボタンをクリックして試みてください。面白いですよ！

RUN

x- -360 deg -180 deg – 90 deg 0 deg 90 deg 180 deg 360 deg
y- -360 deg -180 deg – 90 deg 0 deg 90 deg 180 deg 360 deg
z- -360 deg -180 deg – 90 deg 0 deg 90 deg 180 deg 360 deg
時間- 1 s 2 s 5 s 10 s
回数- 1 回 2 回 5 回 10 回
進行度-
ease linear ease-in ease-out ease-in-out

3D animation
ver.1.21
March 2, 2022

Hilbert314159’s blog

簡単にできる３Dアニメーション【CSS&javascript】 - Hilbert314159’s blog

https://hilbert314159.hatenablog.com/entry/2022/03/13/200152

プログラムが自分の思う通りに動作した時、バグ（不具合）の原因が分かった時は嬉しいものです。まさにプログラマ冥利に、尽きました。その思いが強くて会社を辞めた後もプログラムを作りたいという気持ちに駆られました。 丁度その頃（会社を辞める前か辞めた頃）HTML,CSS,javascript を使用したホームページを作ることが主流になってきました。その後、十年以上HTML,CSS,javascriptの勉強をしています。 ２０２２冬季北京オリンピックの感動も冷めやらぬ中、CSS と javascript を使用して３Dアニメーションを作ってみました。 設定を...

　このアプリを作成するにあたってのポイント

ヒルベルト

・ボタンをクリックされたらアニメーションを開始するには、どうするの？
・えっ！本当。CSSの中で変数を使用できるの？
・javascriptを使用してキーフレーム(keyframe)の引数を変更するには、どうするの？

などの技術的な内容を記述します。

brackets から VScode への移行

　今まで HTML,CSS,javascript を使用してWEBアプリを作る時には、コードエディター「brackets」を使っていたのですが、サポートが終了したとのことでしたので、「Visual Studio Code」へ移行したいと思っていました。簡易的なローカルサーバ「Live Server」をインストールして試してみましたがエディターで変更した内容がbracketsの様に、すぐにはブラウザに反映されないので未だ拡張機能（プラグイン）が足りないのかなと思っていました。そんな時ファイル・メニューの中に「自動保存」の項目があることに気づき「これかも知れない」と思い、「自動保存」にチェックをしたところ、エディターで変更した内容が即時にブラウザに反映される様になりました。自動保存の設定項目は「off」「afterDelay」「onFocusChane」「onWindowChange」があります。

アニメーションの作り方とアニメーションを開始する方法

アニメーションの作り方

　アニメーションの始め方の前に、アニメーションの作り方を簡単に説明します。
　どの様なアニメーションを作るのか、アニメーションのスムーズなトランジション（移り変わり、変遷）の開始点と終了点を定義する描画をキーフレーム(keyframe)を作ります。例えば、画像を右に移動してから９０度時計回りに回転させたい場合には

@keyframes mov_rot {					                                /* アニメーションの名前 */

    0% { transform: translateX(0px) rotate(0deg);}
    50% { transform: translateX(100px) rotate(0deg);}		     /* 右に100ピクセル移動する */
    100% { transform: translateX(100px) rotate(90deg);}		   /* ９０度時計回りに回転する */
}

と記述します。

「transformプロパティ」を使えば、要素に動きをつけることができます。移動、回転、伸縮、傾斜の４つの効果が用意されてあり、二次元的な動きだけではなく、三次元的な動きまでも可能にしているのが特徴です。

transformプロパティは,トランスフォーム関数を指定して対象要素を変形させます。

【平面空間】

【３D空間】

　アニメーションを開始する方法として、よく使用する疑似クラスに

等があります。画像がホーバー（画像にカーソルなどが乗った）時にアニメーションを開始するには

.rect_part3:hover {

    animation-name:             mov_rot;
    animation-duration:         1s;	
    animation-fill-mode:        forwards;	
    animation-timing-function:  ease;
    animation-iteration-count:  1;
}

と記述します。

ここで各プロパティの役割を説明します。

animation-timing-function プロパティは、アニメーションが変化する速度を指定します

animation-fill-mode プロパティは、アニメーション再生中・再生後のスタイルを指定します。

但し、animation-delayプロパティはアニメーションが開始するまでの時間を指定するプロパティです。

ユーザー操作によりボタンをクリックされた時にアニメーションを開始するためにはjavascriptを使用する必要があります。

ユーザー操作によりボタンをクリックされた時、javascriptの関数を呼び出すためはイベント処理を実行するためのメソッド addEventLListener() を使用します。

let Element = document.getElementById(‘クラス名など’);
Element.addEventListener(‘click’, 関数名);

と記述します。ただし関数名の後に () を付ける必要はありません.

イベントの種類には

【マウス関連】

【キーボード関連】

【DOM関連】

【INPUT関連】

などがあります。特にアニメーションに関連するイベントは

があります。

アニメーションを開始する方法

　メソッド addEventListener により呼び出された関数の中で、アニメーションを開始します。ここで classList について説明します。
　classList とは特定の要素のクラス名を追加したり、削除したり、参照したりすることが出来るプロパティです。classListの後にメソッドを定義することにより、追加削除などの機能を指定することができます。

主な classList のメソッドは

があります。

そこでホーバー疑似クラスの時に作った様にしてアニメーションのクラスを作成します。

.rect_rotate {

    animation-name:             mov_rot;
    transform-style:	          preserve-3d;
    animation-duration:         1s;
    animation-fill-mode:        forwards;
    animation-timing-function:  ease;
    animation-iteration-count:  1;
}

このアニメーションのクラスを画像などのクラスに追加することにより、アニメーションを開始することができます。そしてアニメーションが終了したならば、アニメーションが完了したときに発生するイベントによりアニメーションのクラスを忘れずに削除します。

CSSの中で変数を使用する手順

　もう一つ特記したい事は、今までは知らなかったのですが CSS の中で変数が使用できるという事です。カスタム・プロパティという名称で呼ばれているそうです。（２０１５年にW3Cから勧告されたの事です。）これは大変便利な機能です。WEBサイトやWEBアプリの制作過程においてヘッダー、ナビゲーション、セクション、フッターなどの全ての幅(width)を少しだけ広げたいという事はよくありました。この様な場合 CSS の中の最初に変数を定義しておけば、一か所を変更するだけで全ての幅を変更することができます。
　変数名の先頭に二つのハイフンを付けて変数を定義しておき、変数を使用するときにはvar()関数に変数名を代入します。
さらに、:root 疑似クラスを使って

:root {
	--body_width: 720px;
}

と定義すれば、HTML文書の全体にわたって適用することができます。

　このカスタム・プロパティを使用する、もう一つのメリットはキーフレームの中に変数を使えば、javascript により変数を変更することができます。
たとえばアニメーションを回転させるキーフレームを

/* Animation Keyframe */
@keyframes Rotate_rectangle {

    from{
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    to{
        transform: rotateX(var(--val-xdeg)) rotateY(var(--val-ydeg)) rotateZ(var(--val-zdeg));
    }
}

と定義しておけば、javascript の setProperty() メソッドにより変更することができます。

function setProperty_xdeg(event){

    var xdeg = event.currentTarget.value + "deg";

    document.documentElement.style.setProperty('--val-xdeg', xdeg);
}