如何将A-Frame 0.5.0的动画效果迁移至1.2.0版本正常运行

问题根源 #

你的1.2.0版本代码存在三个核心逻辑错误：

• 把原本分属父子两个实体的动画，全部绑定到了同一个实体上，两个动画同时修改rotation属性会产生值冲突
• 给无限循环动画配置了pauseEvents: mouseenter但未设置对应的恢复触发事件，导致动画触发暂停后再也不会继续运行
• 鼠标触发的动画未设置起始值，多次触发时会出现旋转起始位置异常

修复后完整代码 #

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
</head>
<body>
    <a-scene>
        <!-- 父实体仅负责30s无限绕Y轴旋转，无暂停逻辑 -->
        <a-entity id="duck1" position="1 0 -3" animation="property: rotation; to: 0 -360 0; loop: true; easing: linear; dur: 30000">
            <!-- 子实体仅负责鼠标移入触发的4s旋转，动画叠加在父级旋转之上 -->
            <a-entity class="rota" color="#FF0000" scale="0.1 0.1 .1" position="0 0 1" animation__mouseenter="property: rotation; from: 0 0 0; to: 0 360 0; easing: linear; dur: 4000; startEvents: mouseenter; loop: false">
                <a-box color="#FF0000" position="20 0 -10" change-color-on-hover="color: white" scale="2 3 3" collison-check="el: #otherduck; radius: 0.15; other-radius: 0.15;"></a-box>
            </a-entity>
        </a-entity>

        <a-camera position="0 0.2 1.3">
            <a-cursor objects=".rota"></a-cursor>
        </a-camera>
    </a-scene>
</body>
</html>

核心改动说明 #

• 还原了0.5.0版本的父子实体层级，两个动画分别作用在不同实体的rotation属性，父级的全局无限旋转和子级的局部鼠标触发旋转互不干扰，自动叠加效果
• 删除了父级动画不必要的pauseEvents配置，父级动画全程保持运行，完全复刻旧版本的运行逻辑
• 给鼠标触发的动画增加from: 0 0 0和loop: false配置，保证每次触发都从子实体局部旋转初始值开始，单次播放结束后自动复位，不会出现状态混乱
• 保留了a-cursor的objects配置保证交互事件能正确触发

内容的提问来源于stack exchange，提问作者Psychonaut007