制作无限动画jQuery

Posted 2023-05-08

【中文标题】制作无限动画jQuery

【英文标题】：Make an infinite animation jQuery

【发布时间】：2016-02-08 21:52:13

【问题描述】：

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

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

我希望我的解释正确。

【问题讨论】：

如果附上代码的 JSFiddle 会更容易提供具体的解决方案。

你的问题不太清楚，你的意思是div应该连续移动，不减速不加速？

我希望 div 向左移动，使其看起来像是一个永不停止的动画，而不是像现在这样。（再次向左移动停止移动，再次向左移动停止移动）

奇怪的是this（有指定的持续时间）看起来平滑了很多。

使用 CSS 动画怎么样？

【参考方案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 源代码以找出发生了什么。这是JQuery插件v.2.1.4脚本中的animate函数：

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);
        ;
        ....
;

它通过将speed、easing 和callback 参数传递给JQuery.speed 方法来创建optall 对象，以下是脚本中声明的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;
    ......

这表明：

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

因此，当仅向animate 提供三个参数时，第二个参数将被解释为speed 而不是easing（除非第三个参数不是函数，否则它将用于easing）。

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

$('#pipesHolder').animate (left: this.pos, 'easing': 'linear', 'complete': function()

    parent.movePipesHolder();
);

【讨论】：

它在哪里说添加持续时间是设置缓动类型的要求？

在 JQuery 文档中没有说，但是如果不设置持续时间，缓动将不起作用。

我也得出了这个结论，但一个好的答案会有一个解释。这就是为什么我把它留在评论中。据我所知，所有参数都应该是可选的。

@Shikkediel 感谢您指出这一点，我编辑了我的答案并解释了这种行为背后的原因。

感谢研究和努力。