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将被视为绑定到正在设置动画的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

Answer 2

您也可以使用step函数的第二个参数，它是对jQuery.fx对象的引用。其中它有“start”属性，指定动画属性的第一个值（它的最后一个值为'end'，'prop'指定动画属性）

此外，您应该将动画元素的css变换设置为开头的0.5，以便在动画开始时它不会突然从0设置为0.5，您应该使用.css方法来执行此操作，而不是。 attr，因为它不是元素的属性，而是css3属性。

$(element).css("transform","scale(0.5)").delay(2000).animate({
    scale: 1,
    }, {
        duration: 1000,
        step: function (now, fx) {
        scaleVal = now;
        fx.start = 0.5;  
        $(element).css("transform", "scale(" + scaleVal + ")");
    }
});

请参阅jsfiddle

另外，当你使用“translate”方法进行css转换时，你应该在x和y值之间设置逗号 translate(" + centerX + ", " + centerY + ")

具有属性值初始化的jquery动画步骤函数

2 个答案: