スライドアニメーション

はじめに

今回は、JavaScriptを使用したスライドアニメーションの実装について触れてみようと思います。私のまとめは"自分が見返せるように"という意味合いもあります。エンジニア初心者故、温かい目で見ていただけると嬉しいです。

【スライドアニメーション】

このコードを使用すると、要素を指定した方向にスライドさせることが出来ます。

例

function slideAnimation(element, direction, distance, duration){
    /* 開始時刻を取得 */

    const startTime = performance.now();

    /* スライドアニメーションの関数 */
    function slide(timestamp) {
        /* 現在時刻を取得し、開始時刻からの経過時間を計算 */
        const currentTime = timestamp - startTime;
        
        /* 経過時間がアニメーションの継続時間以下であれば、アニメーションを続行 */
        if (currentTime < duration) {
            /* 指定された方向に要素を移動させる */
            if (direction === "left") {
                element.style.transform = `translateX(${-currentTime * distance / duration}px)`;
            } else if (direction === "right") {
            ~~~
            }
            
            /* アニメーションを再実行 */
            requestAnimationFrame(slide);
        } else {
            /* アニメーションが終了したら、transformをクリアして初期位置に戻す */
            element.style.transform = "translate(0)";
        }
    }

    /* アニメーションを開始 */
    requestAnimationFrame(slide);
}

-slideAnimation→要素を指定した方向・距離にアニメーションさせる関数。
-element→アニメーションさせるHTML要素を指定する引数。
-direction→left,right,up,downを値として、スライドの方向を指定する引数。また、translateXが横、translateYが縦の方向。
-distance→スライドさせる距離をピクセル単位で指定する引数。
-duration→アニメーションを継続させる時間をミリ秒単位で指定する引数。

実際にコードを書くときは、上記のコードに以下のように追加することで動作させることが出来ます。

＜右方向、500px分、500msec＞

例

const element = document.getElementById("box");
slideAnimation(element, "right", 500, 500);

【二重処理】

二重処理とは、同じ処理が重複して行われることをいいます。このようなことが起きると、パフォーマンスの低下や誤った結果が出てしまう恐れがあるため、フラグを立てることで制御する必要があります。

例

/* フラグの初期値(条件を満たしていないためfalseで入力) */
let flag = false;
let cnt = 0;

/* while文による */
while(!flag){
    cnt++;
    console.log(cnt);
    /* 変数cntの値が7になるとflagにtrueを入力する(フラグを立たせる) */
    if(cnt == 7){
        flag = true;
    }
}

おわりに

今回はスライドアニメーションのみまとめましたが、他にもたくさんの関数が存在します。現在はシングルページを作成する課題に取り組んでおり、フェードインやフェードアウトなども使うことになると思います。エンジニアデビューへの道のりはまだまだですが、少しでも早く知識と技術を身に着け、デビューを目指していきたいです。