1 
$(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変換プロパティを使用してこれらすべての値を設定したい、つまり. 1 つのステップですべてのプロパティ値を取得したい。

4

2 に答える 2

0

すべてのプロパティに値がある場合にのみ、要素をアニメーション化する必要があります。これにより、リフローの回数が減り、よりスムーズなアニメーションが作成されます。

var animatedProperties = {scale: 0, x: 0, y: 0},
    animatedPropertiesLength = 3,
    updatedProperties = 0,
    targetElement = $('#target');

$({
    scale: 0,
    x: 0,
    y: 0
}).animate({
    scale: 1,
    x: 100,
    y: 200
}, {
    step: function (now, fx) {
        animatedProperties[fx.prop] = now;
        
        if (++updatedProperties == animatedPropertiesLength) {
            updatedProperties = 0;
            
            targetElement.css('-webkit-transform', 'translate(' + animatedProperties.x * (animatedProperties.scale - 1) + '%,' + (animatedProperties.y * animatedProperties.scale - 1) + '%)scale(' + animatedProperties.scale + ')');
        }
    }
});
#target {
    width: 50px;
    height: 50px;
    background: #bbb;
    -webkit-transform: scale(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target"></div>

于 2014-11-03T16:34:36.553 に答える