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 + ")"); 
     } 
    } 
); 

단계 함수에서 소품 값은 단계별로 올 것입니다 (예 : scale, centerX, centerY). CSS 변환 속성을 사용하여 모든 값을 설정하려고합니다. 모든 속성 값을 한 번에 가져 오려고합니다.

Answer 1

fx 개체를 사용하여 값을 단계별로 변수에 저장 한 다음 최종 CSS 선언에서 한 번에 모두 사용할 수 있습니다.

다른 모든 변수를 0으로 설정하는 문제는 animation 함수의 바깥 쪽 바깥 쪽 변수를 인스턴스화 한 다음 각 조건문 내에서 하나의 변수 만 설정하여 피할 수 있습니다. 이를 통해 반복간에 가치를 유지할 수 있습니다. 모든 속성에 값이있는 경우에만 당신은 요소를 애니메이션한다

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

Answer 2

:

여기 (데모 더 나은에 맞게 몇 가지 변경과) 코드를 사용하여 예제 . 이렇게하면 리플 로우 횟수가 줄어들고보다 부드러운 애니메이션이 생성됩니다.

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>