javascript - 具有属性值初始化的jquery animate step函数

Question

请引用下面的动画代码。

$(element).delay(2000).animate({
    scale: 1,
}, {
    duration: 1000,
    step: function (now) {
        scaleVal = now;
        $(element).attr("transform", "translate(" + centerX + " " + centerY + ") scale(" + scaleVal + ") translate(" + (-centerX) + " " + (-centerY) + ")");
    }
});

scale 是元素的属性。标度值总是从 0 开始到 1 结束。我希望标度值从 0.5 开始到 1。

在阶跃函数中，比例总是从 0 开始。

需要:标度值最大值为 1，并且从 0.5 而不是 0 开始。

谢谢，

湿婆

Answer 1

jQuery 使用Tween.propHooks获取/设置动画中的属性。非 CSS 属性 scale 将被视为绑定(bind)到正在生成动画的 DOM 元素的属性。所以你可以在动画之前设置scale属性的初始值。

$(element).each(function () { this.scale = 0.5; }).delay(2000).animate({
    scale: 1,
}, {
    duration: 1000,
    step: function (now) {
        scaleVal = now;
        $(element).attr("transform", "translate(" + centerX + " " + centerY + ") scale(" + scaleVal + ") translate(" + (-centerX) + " " + (-centerY) + ")");
    }
});

Live Demo