带有数组的 Javascript/jQuery 动画

Question

我正在使用 HTML、CSS 和 Javascript 构建动画场景。目前，我对每条要制作动画的鱼都有 2 个函数。第一个将它发送到屏幕上，第二个在它离开屏幕后重置其位置。

这两个函数的样子...

function fish1Swim1() {
    var ranNum = Math.round(Math.random() * 2.5);
    var speed = 6000 * ranNum;
    var screenW = screenWidth+350;
    $('#fish1').animate({
        left: -screenW,
    }, speed, function () {
        fish1Swim2();
    });
}

function fish1Swim2() {
    var ranNum = Math.round(Math.random() * 7);
    var top = ranNum * 100;
    var screenW = screenWidth+350;
    $('#fish1').css("left", screenW);
    $('#fish1').css("top", top);
    fish1Swim1();
}

我对场景中的所有其他鱼也使用了非常相似的函数，但我想在脚本的开头创建 2 个数组，一个用于 ID，一个用于速度，就像这样...

var fish=["#fish1","#fish2","#oldBoot"];
var speeds=["6000","7000","5000"];

然后让我早期编写的函数运行，但用数组中的项目替换鱼和速度。

我该怎么做？

Answer 1

这是怎么回事？这为所有动画/CSS 运动提供了通用功能。在动画方面，速度是从数组中读取的，如您所愿。

该函数需要两个参数 - 第一个是元素的 ID（减去 #）；第二个，阶段（就像在您的原始代码中一样 - 您有一个用于鱼 1 的阶段 1 函数，以及一个用于鱼 1 的阶段 2 函数）。

要使该功能适用​​于其他动画元素，只需扩展 switch 语句即可。

//element data and corresponding anim speeds
var speeds = {fish1: 6000, fish2: 7000, oldBoot: 5000};

//main animation/movement func
function do_action(id, phase) {

    var el, jq_method, method_data, after;

    //work out what it is we're doing, and to what, and set some details accordingly
    switch (id) {
        case 'fish1':
            el = $('#fish1');
            switch (phase) {
                case 1:
                    jq_method = 'animate';
                    method_data = [
                        {left: -screenWidth+350},
                        Math.round(Math.random() * 2.5) * speeds[id],
                        function() { do_action('fish1', 2); }
                    ];
                    break;
                case 2:
                    jq_method = 'css';
                    method_data = [
                        {top: Math.round(Math.random() * 700), left: screenWidth+350}
                    ];
                    after = function() { do_action('fish1', 1); };

                break;
            }
            break;
        break;
    }

    //do actions
    el[jq_method].apply(el, method_data);
    if (after) after();

}

//and off we go
do_action('fish1', 1);