jquery - 如何使用 jQuery 动画步骤对多个属性进行动画处理？

Question

$(element).animate(
    {
        scale: 1,
        centerX: -(this.chartObj.model.m_AreaBounds.Width /2),
        centerY:-(this.chartObj.model.m_AreaBounds.Height /2)
    },
    {
        duration: 2000,
        step: function(now,fx) {
            var scaleVal, x, y;
            if (fx.prop == "scale") {
                scaleVal = now;
                x = 0;
                y = 0;
            } else if (fx.prop == "centerX") {
                x = now;
                y = 0;
                scaleVal = 0;
            }
            else if (fx.prop == "centerY") {
                x = 0;
                y = now;
                scaleVal = 0;
            }
            $(element).attr("transform", "translate("+x*(scaleVal-1)+","+(y*scaleVal-1)+")scale(" + now + ")");
        }
    }
);

在步骤函数中， Prop 值将逐步出现(即，首先scale，然后centerX，然后centerY)。我想使用 CSS 变换属性设置所有这些值，即。我想一步获得所有属性值。

Answer 1

您可以使用 fx 对象在单步执行时将值存储到变量中，然后在最终的 CSS 声明中一次性使用它们。

您的问题是将所有其他变量设置为 0，这可以通过在动画函数外部实例化变量，然后仅设置每个条件语句中的一个变量来避免。这将使它们能够在迭代之间保持其值。

这是使用您的代码的示例(只需进行一些更改即可更好地适应演示):

$(document).ready(function () {
    
   var scaleVal, x, y;
   scaleVal = x = y = 0;
    
    $({scale: 0, centerX: 0, centerY: 0}).animate({
        scale: 1,
        centerX: 100,
        centerY: 200
    }, {
        duration: 2000,

        step: function (now, fx) {
            if (fx.prop == "scale") {
                scaleVal = now;
            } else if (fx.prop == "centerX") {
                x = now;
            } else if (fx.prop == "centerY") {
                y = now;
            }
            $('div').css("-webkit-transform", "translate(" + x * (scaleVal - 1) + "%," + (y * scaleVal - 1) + "%)scale(" + scaleVal + ")");

        }
    });
    
});

div {
    width: 50px;
    height: 50px;
    background: #bbb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>