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.

回答1:

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>

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

回答2:

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.

来源：https://stackoverflow.com/questions/38515770/multiple-aframe-animations

标签

aframe