框架/动画 : how to pause and resume?

Question

我在 aframe (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 秒并不会重新启动它。

有什么可以帮助的想法吗？

Answer 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