javascript - 制作一个无限动画jQuery

Question

我想给一个div做一个无限动画。
我成功地制作了一个无限移动的 div，但它并没有显示为一致的动画。 div 正在移动然后再次调用该函数并再次移动，您可以看到动画何时停止以及何时再次开始。
这是我做的代码:

this.movePipesHolder = function(){
    this.pos=this.pos-10;
    parent=this;
    $('#pipesHolder').animate({"left":this.pos},function(){
        parent.movePipesHolder();
    });
}

我希望我的解释是正确的。

Answer 1

根据 JQuery 文档 animate()采用以下参数:

.animate( properties [, duration ] [, easing ] [, complete ] )

默认缓动设置为 swing这解释了您正在经历的动画行为，要使动画以恒定的速度或速度移动，您需要将缓动设置为 linear ，要设置缓动参数，您还需要设置持续时间参数(默认持续时间值为 400):

this.movePipesHolder = function()
{
    this.pos -= 10;
    parent = this;
    $('#pipesHolder').animate ({left: this.pos}, 400, 'linear', function()
    {
        parent.movePipesHolder();
    });
}

这是关于 JSFiddle 的工作示例.

---

编辑:

不设置持续时间缓动不起作用的原因:

在 JQuery 文档中没有提到必须设置持续时间才能使缓动工作，所以我检查了 jQuery 源代码以找出发生了什么。这是 animate JQuery 插件中的函数 v.2.1.4脚本:

animate: function (prop, speed, easing, callback)
{
    var empty = jQuery.isEmptyObject (prop),
        optall = jQuery.speed (speed, easing, callback),
        doAnimation = function()
        {
            // Operate on a copy of prop so per-property easing won't be lost
            var anim = Animation (this, jQuery.extend ({}, prop), optall);
            // Empty animations, or finishing resolves immediately
            if (empty || data_priv.get (this, "finish")) anim.stop (true);
        };
        ....
};

它创建 optall通过传递对象 speed , easing和 callback JQuery.speed 的参数方法，下面是JQuery.speed脚本中声明的函数:

jQuery.speed = function (speed, easing, fn)
{
    var opt = speed && typeof speed === "object" ? jQuery.extend ({}, speed) :
    {
        complete: fn || !fn && easing || jQuery.isFunction (speed) && speed,
        duration: speed,
        easing: fn && easing || easing && !jQuery.isFunction (easing) && easing
    };

    opt.duration = jQuery.fx.off ? 0 : typeof opt.duration === "number" ? opt.duration :
        opt.duration in jQuery.fx.speeds ? jQuery.fx.speeds[opt.duration] : jQuery.fx.speeds._default;
    ......
}

它表明:

1. 提供的最后一个参数始终设置为回调函数(除非只提供了两个参数并且第二个不是函数或只提供了一个参数，在这种情况下回调将设置为 false)。
2. 第二个参数始终设置为速度(这将在稍后验证，如果无效则更改为默认值)。
3. 仅当提供四个参数时，Easing 才会设置为第三个参数，或如果第三个参数不是函数，则提供三个参数。

所以当只为 animate 提供三个参数时第二个参数被解释为 speed而不是 easing (除非第三个参数不是函数，否则它将用于 easing )。

但是在阅读源代码后我意识到(文档中也提到了)您可以在 options 中传递最后三个参数。对象 .animate (properties, options)在选项中，您可以添加 duration , easing或 complete或其中两个或全部的组合，例如:

$('#pipesHolder').animate ({left: this.pos}, {'easing': 'linear', 'complete': function()
{
    parent.movePipesHolder();
}});