javascript - 使用 polymer 核心动画从当前值进行动画处理

My Polymer应用程序将对象的top从任意位置动画化为0。它现在正在使用Velocity进行此操作，因为从任何当前状态到新状态进行动画处理的方式非常明显。与Polymer的core-animation是否可能（甚至适当）？所有演示均在每个关键帧处显示固定值。

最佳答案

我知道的一种方法是使用核心动画的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>

关于javascript - 使用 polymer 核心动画从当前值进行动画处理，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27871931/