Polymer core-animation을 사용하여 현재 값에서 애니메이션

Question

내 Polymer 응용 프로그램은 객체의 top을 임의 위치에서 0으로 움직입니다. 어떤 현재 상태에서 새로운 상태로 애니메이트하는 방법이 매우 분명하기 때문에 Velocity를 사용하여 지금 당장 그것을 할 수 있습니다. Polymer의 core-animation과 관련이 있습니까? 모든 데모는 각 키 프레임에서 고정 값을 보여줍니다.

Answer 1

내가 아는 한 가지 방법은 코어 애니메이션의 customEffect 콜백을 사용하는 것입니다. 클릭하면

이 예제는 버튼을 애니메이션을

<script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script> 
 
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html"> 
 
<link rel="import" href="http://www.polymer-project.org/components/core-animation/core-animation.html"> 
 

 
<polymer-element name="test-element"> 
 

 

 
    <template> 
 

 
    <core-animation id="animation" duration="1000" easing="ease-in-out" fill="forwards"></core-animation> 
 

 
    <div relative> 
 

 
     <button on-tap="{{go}}" style="position: absolute;">Click me</button> 
 

 
    </div> 
 

 
    </template> 
 
    <script> 
 
    Polymer({ 
 

 
     go: function(e, detail, sender) { 
 

 
     var maxTop = 100; 
 

 
     // animation target 
 
     this.$.animation.target = sender; 
 

 
     // custom animation callback 
 
     this.$.animation.customEffect = function(timeFraction, target, animation) { 
 
      target.style.top = (maxTop * timeFraction) + "px"; 
 
     }; 
 

 
     // being the animation 
 
     this.$.animation.play(); 
 

 
     } 
 

 

 
    }); 
 
    </script> 
 
</polymer-element> 
 

 

 

 
<test-element></test-element>