CODEWITHSUNDEEP
javascriptanimationaframe
Limboer
Limboer

Reputation: 414

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

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

I am new to A-frame, and i am trying to do a simple click-rotation animation on <a-box>. The expected behaviour should be: each time after i click the cube, the cube should do a rotation animation.

However i meet a problem which is: Only the first click will trigger the rotation animation, the rest of click events won't work. What i want to achieve is one click should map to one animation.

The code snippet is provided above.

How could i resolve this problem?

Upvotes: 1

Views: 467

Answers (1)

St&#233;phane Albanese
St&#233;phane Albanese

Reputation: 560

Actually your code is correct and it does work. It seems like it does not trigger again for a simple reason. Your animation property only has a "to" attribute but no "from". So the first time it goes from the original rotation to the destination. But second time it's already at the destination value, so it has nothing to animate.

You can fix this by setting the attribute like this :

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

Upvotes: 1

Related Questions