Cacher is the code snippet organizer for pro developers

/*
 * makeRenbanAnime 連番用のアニメーションスクリプト
 * 背景画像は一番左上から始まり右へ進んで最終的に一番右下に到達するもので作られていること想定
 * @param [element] elm アニメーションする要素
 * @param [Number] width 背景画像の幅(px)
 * @param [Number] height 背景画像の幅(px)
 * @param [Number] col 1コマあたりの幅(px)
 * @param [Number] row 1コマあたりの高さ(px)
 * @param [Number] duration アニメーションの感覚(ミリ秒)
 * @param [Boolean] isloop 繰り返し有無（true:有 false:無）
 */
export function makeRenbanAnime(elm, width, height, col, row, duration, isloop) {
    // 初期化
    let currentWidth = 0;
    let currentHeight = 0;

    // 1コマあたりの縦横長さ取得
    const frameWidth = width / col;
    const frameHeight = height / row;
    let frameList = [];

    // 連番用の配列作成
    // 全ての段をめぐるまでくりかえす
    do {
        frameList.push({
            x: currentWidth,
            y: currentHeight
        });
        // 全体の横幅と、進んだ位置＋１フレームあたりの幅が一致するまで横幅分ずらす
        // 幅が一致したら一段ずらして幅の値は元に戻す
        if (currentWidth + frameWidth == width) {
            currentHeight += frameHeight;
            currentWidth = 0;
        } else {
            currentWidth += frameWidth;
        }
    } while (currentHeight + frameHeight <= height)

    // 繰り返し用に設定
    let frameIndex = 0;
    const listLength = frameList.length;

    // アニメーション
    if (!isloop) {
        var repeatFnc = setInterval(function () {
            if (frameIndex == listLength - 1) {
                clearInterval(repeatFnc);
            }
            elm.style.backgroundPosition = "-" + frameList[frameIndex].x + "px -" + frameList[frameIndex].y + "px";
            frameIndex++;
        }, duration)
    } else {
        setInterval(function () {
            elm.style.backgroundPosition = "-" + frameList[frameIndex].x + "px -" + frameList[frameIndex].y + "px";
            frameIndex = ++frameIndex % listLength
        }, duration)
    }

    return;
}