如何使用animateWithDuration无限期或X次重复抖动动画？

使用animateWithDuration函数可以实现动画的重复播放。该函数是jQuery中的一个动画函数，用于在指定的时间内改变元素的样式。

要实现无限期重复抖动动画，可以将重复次数设置为"infinite"，示例代码如下：

$(element).animate({
    marginLeft: "+=10px"
}, {
    duration: 200,
    easing: "linear",
    complete: function() {
        $(this).animate({
            marginLeft: "-=20px"
        }, {
            duration: 200,
            easing: "linear",
            complete: function() {
                $(this).animate({
                    marginLeft: "+=10px"
                }, {
                    duration: 200,
                    easing: "linear",
                    complete: function() {
                        // 重复动画
                        $(this).animate({
                            marginLeft: "+=10px"
                        }, {
                            duration: 200,
                            easing: "linear",
                            complete: function() {
                                // 递归调用实现无限期重复
                                $(this).animate({
                                    marginLeft: "-=20px"
                                }, {
                                    duration: 200,
                                    easing: "linear",
                                    complete: function() {
                                        $(this).animate({
                                            marginLeft: "+=10px"
                                        }, {
                                            duration: 200,
                                            easing: "linear",
                                            complete: function() {
                                                // 递归调用实现无限期重复
                                                $(this).animate({
                                                    marginLeft: "+=10px"
                                                }, {
                                                    duration: 200,
                                                    easing: "linear",
                                                    complete: function() {
                                                        // 递归调用实现无限期重复
                                                        // ...
                                                    }
                                                });
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    }
                });
            }
        });
    }
});

上述代码中，使用了递归调用的方式实现了无限期重复抖动动画。每次动画完成后，再次调用animate函数来实现下一次动画。

如果需要设置重复次数为X次，可以使用一个计数器变量来控制递归调用的次数，示例代码如下：

var repeatCount = 0;
var maxRepeatCount = X;

function shakeAnimation() {
    $(element).animate({
        marginLeft: "+=10px"
    }, {
        duration: 200,
        easing: "linear",
        complete: function() {
            $(this).animate({
                marginLeft: "-=20px"
            }, {
                duration: 200,
                easing: "linear",
                complete: function() {
                    $(this).animate({
                        marginLeft: "+=10px"
                    }, {
                        duration: 200,
                        easing: "linear",
                        complete: function() {
                            repeatCount++;
                            if (repeatCount < maxRepeatCount) {
                                // 继续重复动画
                                shakeAnimation();
                            }
                        }
                    });
                }
            });
        }
    });
}

// 调用函数开始动画
shakeAnimation();

在上述代码中，使用了一个计数器变量repeatCount来记录已经重复的次数，当重复次数达到maxRepeatCount时，停止递归调用。

关于animateWithDuration函数的详细说明和使用方法，可以参考腾讯云的相关文档和示例代码：