A帧中每次触发点击事件如何触发相关动画？

Question

<html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
    
      <a-box 
        color="blue" 
        position="0 3 -5" 
        rotation="0 45 45" 
        scale="1 1 1"
        animation__rotation="property: rotation; to: 360 405 45; dur: 1000; startEvents: click;">
      </a-box>
     
      <!-- camera && mouse -->
      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>    
    </a-scene>
  </body>
</html>

我是 A-frame 的新手，我想在 <a-box> 上做一个简单的点击旋转动画。预期的行为应该是：每次我点击立方体后，立方体应该做一个旋转动画。

但是我遇到一个问题是：只有第一次点击会触发旋转动画，其余的点击事件都不起作用。我想要实现的是一次点击应该映射到一个动画。

上面提供了代码片段。

我该如何解决这个问题？

Answer 1

实际上您的代码是正确的，而且确实有效。似乎出于一个简单的原因它不会再次触发。您的动画属性只有“to”属性而没有“from”。所以第一次从原来的轮换到目的地。但是第二次它已经处于目标值，所以它没有任何动画。

您可以通过像这样设置属性来解决此问题：

animation__rotation="property: rotation; from: 0 45 45; to: 360 405 45; dur: 1000; startEvents: click;">

A帧中每次触发点击事件如何触发相关动画？

How to trigger related animation each time trigger click event in A-frame?

javascript

animation

aframe