CODEWITHSUNDEEP
aframe
Fulvio ReddKaa Romanin
Fulvio ReddKaa Romanin

Reputation: 21

Multiple aframe animations

I have built a scripted animation from point A to B to C and so on.

Animations are triggered via JS (e.g document.getElementById('camera').emit('animazione_zero_avanti')).

I am creating animations like this:

i would like to add a Z-Axis rotation as well to the first animation. Can an animation have multiple attributes?

Thanks in advance.

Upvotes: 2

Views: 3596

Answers (2)

Derzu
Derzu

Reputation: 7146

Starting from aframe version 0.9.0 <a-animation> is no longer supported.

But you can still use and combine animations using the property animation.

For example:

<a-sphere color="blue" radius="0.5" position="0 0.5 0" segments-height="53"
    animation='   property: position; dur: 5000; from: -2 0.5 0; to: 2 0.5 0; dir: alternate; easing: linear; loop: true;'
    animation__2='property: rotation; dur: 1000; from: 0 0 0;    to: 0 360 0; dir: normal;    easing: linear; loop: true;'
    animation__3='property:    scale; dur: 1000; from: 1 1 1;    to: 2 2 2;   dir: alternate; easing: linear; loop: true;'>
</a-sphere>

A live example can be found at this CodePen.

More detail at the a-frame API.

Upvotes: 2

ngokevin
ngokevin

Reputation: 13233

You can add multiple elements. Though note that rotating the camera or taking control of it is heavily not recommended for VR due to sickness. And you might have troubles since the controls continuously update the camera. You might be able to animate a wrapper entity, but then the rotations will compose weirdly.

<a-camera>
  <a-animation attribute="position" ...></a-animation>
  <a-animation attribute="rotation" ...></a-animation>
</a-camera>

Or

<a-entity>
  <a-animation attribute="rotation" ...></a-animation>
  <a-camera>
    <a-animation attribute="position" ...></a-animation>
  </a-camera> 
</a-entity>

Upvotes: 2

Related Questions