如何使 0.5.0 Aframe 的动画在 1.2.0 Aframe 中工作？答案

【问题标题】：How to make animation of 0.5.0 Aframe work in 1.2.0 Aframe?如何使 0.5.0 Aframe 的动画在 1.2.0 Aframe 中工作？
【发布时间】：2021-12-31 14:18:30
【问题描述】：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v1.16.0/dist/aframe-extras.min.js"></script>

    
</head>

<body>
    <a-scene>

        <a-entity id="duck1" position="1 0 -3">
            <a-animation attribute="rotation" to="0 -360 0" repeat="indefinite"  easing="linear" dur="30000"> </a-animation>
            <a-entity color="#FF0000" scale="0.1 0.1 .1" position="0 0 1">
                <a-animation attribute="rotation" to="0 360 0" easing="linear" dur="4000" begin="mouseenter"> </a-animation>
                <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></a-cursor></a-camera>

      
    </a-scene>
</body>
</html>

动画在这里的工作方式我想让它在 1.2.0 版本的 Aframe 中看起来相似。我正在尝试使用相同的公式。这是我在 1.2.0 Aframe 中尝试做的事情。

<html>
<head>
   <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>

        <a-entity class="rota" id="duck1" color="#FF0000" scale="0.1 0.1 .1" position="2 0 -7" animation="property: rotation; to:0 -360 0; loop:true; easing:linear; dur:30000; pauseEvents: mouseenter; resumeEvents: " animation__mouseenter="property: rotation; to:0 360 0; easing:linear; dur:4000; startEvents: mouseenter">
            <a-box class="rota" color="#FF0000"  position="20 0 -10"  scale="2 3 3" collison-check="el: #otherduck; radius: 0.15; other-radius: 0.15;"> </a-box>
        </a-entity>
  <a-camera position="0 1.2 1.3"><a-cursor objects=".rota" ></a-cursor></a-camera>

      
    </a-scene>
</body>
</html>

在第二个代码中，它最初工作正常，然后卡在一个特定位置。谁能帮我修复这个错误，让它看起来类似于 0.5.0 Aframe 版本中的代码。

【问题讨论】：

标签： aframe

【解决方案1】：

这是 1.2.0 语法中的 0.5.0 代码

<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.rawgit.com/donmccurdy/aframe-extras/v6.1.1/dist/aframe-extras.min.js"></script>

    
</head>

<body>
    <a-scene>

        <a-entity id="duck1" position="1 0 -3"
                  animation="property: rotation; to:0 -360 0; loop: true; easing:linear; dur:3000">
            <a-entity color="#FF0000" scale="0.1 0.1 0.1" position="0 0 1"
                  animation="property:rotation; to:0 360 0; easing:linear; dur:4000; startEvents: mouseenter">
                  <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></a-cursor></a-camera>      
    </a-scene>
</body>
</html>

此处出现故障： https://glitch.com/edit/#!/animation-example-0-5-to-12-0?path=index.html%3A1%3A0

不确定我是否完全理解代码应该做什么 - 例如有一个与#otherduck 的碰撞处理程序，但没有#otherduck 实体。

不过，1.2.0 的代码似乎和 0.5 的代码是一样的。

【讨论】：