1

请参考下面的动画代码。

$(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。

谢谢，

湿婆

4

2 回答 2

4

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

于 2013-06-11T07:58:56.723 回答
2

您还可以使用 step 函数的第二个参数，它是对 jQuery.fx 对象的引用。除其他外，它具有指定动画属性的第一个值的“开始”属性（它还有最后一个值的“结束”和指定动画属性的“道具”）

另外你应该在开始时将动画元素的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

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

于 2013-06-11T09:33:21.047 回答