javascript - 对于此动画的 "step"事件，使用开关、三元或对象而不是 if/else？

Question

我想知道是否有更好的方法来处理这个问题，或者使用更少的文本，而不是使用一堆 if/else 语句。

目前我在动画过程中要处理图片更改:

link.animate({
            top: '0'
        }, {
            duration: 3000*(Math.random()+1),
            easing: 'easeOutBounce',

            step: function(now, tween) {
                if (now < -300){
                    $("#"+ link.data("shadow")).attr('src', '');
                } else if (now < -250) {
                    $("#"+ link.data("shadow")).attr('src', ...);
                } else if (now < -200) {
                    $("#"+ link.data("shadow")).attr('src', ...);
                } ... etc.

如果我可以使用 switch 语句、三元运算符或“step”函数的对象来代替 if/else 语句，有人可以提供有关如何执行此操作的示例吗？提前致谢。

Answer 1

据我所知，您需要基于 50px 差异的不同图像。 50 是这里的关键。我建议使用源数组，其中较低的 px 是数组中的第一个:

var arr = ['srcFor0px', 'srcFor50px', 'srcFor100px', 'srcFor150px', 'srcFor200px'...];

然后，知道您的较低值是多少(在本例中 -300 是较低值)。然后，您需要将最小值添加到当前值:

var comparison = now - -300

之后，您需要对结果除以 50 进行数学 ceil。

var index = Math.ceil(comparison / 50);

那么剩下的唯一事情就是查看索引是否入站。基本上，只需检查索引是否低于 0 或高于数组长度:

if(index < 0) index = 0;
else if(index >= arr.length) index = arr.length-1;

然后你就得到了数组中的好源。最终代码如下所示:

step : function(now){
    var arr = ['srcFor-300px', 'srcFor-250px', 'srcFor-200px', 'srcFor-150px', 'srcFor-100px'];
    var comparison = now - -300
    var index = Math.ceil(comparison / 50);

    if(index < 0) index = 0;
    else if(index >= arr.length) index = arr.length-1;

    $("#"+ link.data("shadow")).attr('src', arr[index]);
}