水族館(すいぞくかん)

水族館すいぞくかんのアニメーションを SVGエスブイジー で作つくってみました。

水族館すいぞくかんのアニメーション

JavaScriptジャバスクリプト のプログラムで三角さんかく関数かんすう（cosコサイン）を使つかって魚さかなの幅はばを縮小しゅくしょうさせています。

/**
 * moveFish function
 * @since 0.1
 */
const moveFish = function() {
    for (i = 0; i < max; i++) {
        a[i] += da[i];
        if (a[i] > 2 * Math.PI) {
            a[i] -= 2 * Math.PI;
        }
        _x = x + Math.round((width * 0.4) * Math.cos(a[i])) + width * 0.5;
        use[i].move(_x - fish.width() / 2, fy[i] - fish.height() / 2);
        use[i].transform({scaleX: -Math.round(Math.sin(a[i]) * 1000) / 1000});
    }
}

詳くわしいことはブログ「JavaScript (56) 水族館すいぞくかん」をご覧らんください。