aframe/动画：如何暂停和恢复？答案

【问题标题】：aframe/animation : how to pause and resume?aframe/动画：如何暂停和恢复？
【发布时间】：2017-11-23 18:38:05
【问题描述】：

我在框架 (ar.js) 中有一个 360° 旋转动画，我想暂停并继续它，而我所能做的只是暂停但从头开始。

<a-entity>
    <a-entity
        gltf-model="#tree-gltf">
    </a-entity>
    <a-animation
        begin="rotation-begin"
        end="rotation-end"
        attribute="rotation"
        to="0 360 0"
        direction="alternate"
        dur="10000"
        repeat="indefinite">
    </a-animation>
</a-entity>

Animation documentation 允许访问“开始”和“结束”事件，但“开始”在暂停时从头开始而不是从当前值重新开始。

Entity documentation 允许访问 pause() 和 play()，它们是相同的。如果“开始”属性存在，Play() 根本不起作用，因此您必须在事件或函数之间进行选择。但是 play() 也会从头开始重新开始动画，而不是从动画暂停的地方开始。

我还尝试了一个丑陋的技巧，将属性“dur”设置为一小时以减慢动画速度，使其看起来像暂停，但将“dur”设置回 10 秒并不会重新启动它。

有什么好办法吗？

【问题讨论】：

您是否尝试过在动画中使用fill=forwards？这可能会在动画暂停之前设置新值，因此当动画再次重新启动时它不会重置。否则，您也许可以将填充与另一个动画一起使用
fill=forward 是默认值，所以是的。我还尝试了所有其他值但没有成功，因为它定义了框架一旦停止/暂停的位置，而不是重新启动时要做什么。还是谢谢。

标签： aframe

【解决方案1】：

使用 Kevin Ngo 的 animation-component 会有所帮助，因为它正确支持暂停/恢复。

除了包含组件之外，您的代码将如下所示：

<a-entity
    animation="property:rotation; startEvents:rotation-begin; pauseEvents: rotation-pause; resumeEvents: rotation-resume; to:0 360 0; dir:alternate; dur:10000; repeat:indefinite"
    gltf-model="#tree-gltf">
</a-entity>

这将为您提供三个可以触发的事件：rotation-begin、rotation-pause 和 rotation-resume。

See a demo here

【讨论】：

非常感谢，我错过了 Aframe/Animation 文档顶部的 link。它完成了这项工作，请参阅CodePen，我将“repeat:indefinite”替换为“loop:true”并使用restartEvents。