使用Polymer core動畫從當前值動畫製作動畫

Question

我的聚合物應用程序將對象的top從任意位置動畫到0。它現在使用Velocity來做到這一點，因爲從任何當前狀態到新狀態的動畫方式都非常明顯。聚合物的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>