gpt4 book ai didi

javascript - 使用 Polymer core-animation 根据当前值制作动画

转载 作者:行者123 更新时间:2023-12-03 11:05:36 25 4
gpt4 key购买 nike

我的 Polymer 应用程序将对象的 top 从任意位置动画到 0。它现在正在使用 Velocity 来做到这一点,因为从任何当前状态到新状态的动画方式非常明显。是否有可能(甚至合适)使用 Polymer 的核心动画?所有演示都在每个关键帧处显示固定值。

最佳答案

我知道的一种方法是使用核心动画的 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 core-animation 根据当前值制作动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27871931/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com