A-Frame：如何使用场景为场景中的对象设置动画

Posted 2021-05-02

我们来谈谈3D电影或类似的电影。好的，我知道如何使用<a-animation>为属性设置动画。我也尝试了基于animejs的aframe-animation-component。我爱animejs。它有用anime.timeline()。您可以设置此框架并根据需要为多个对象设置动画。但它有非常严重的麻烦：它无法为position或scale或其他序列化组件等复杂属性制作动画。这个麻烦我已经描述了here。 Animejs的时间轴非常适合DOM，但很难与A-Frame一起使用。我还为three.js找到了this example。也许我可以为我的A-Frame场景生成相同的动画？寻找有关场景关键帧或时间轴的任何建议。

答案

https://www.npmjs.com/package/aframe-animation-timeline-component

我发布了动画时间轴组件。

<a-scene animation-timeline__1="timeline: #myTimeline; loop: true">

<a-timeline id="myTimeline">
  <a-timeline-animation select="#text1" name="togglevisible"></a-timeline-animation>
  <a-timeline-animation select="#text1" name="fadein"></a-timeline-animation>
  <a-timeline-animation select="#text1" name="fadeout"></a-timeline-animation>
  <a-timeline-animation select="#text1" name="togglevisibleoff"></a-timeline-animation>

  <a-timeline-group>
    <a-timeline-animation select="a-entity[mixin~=box]" name="fadein"></a-timeline-animation>
    <a-timeline-animation select="a-entity[mixin~=box]" name="scale"></a-timeline-animation>
    <a-timeline-animation select="a-entity[mixin~=box]" name="color"></a-timeline-animation>
  </a-timeline-group>

  <a-timeline-group>
    <a-timeline-animation select="#text2" name="togglevisible"></a-timeline-animation>
    <a-timeline-animation select="#text2" name="fadein"></a-timeline-animation>
    <a-timeline-animation select="#text2" name="textcolor"></a-timeline-animation>
  </a-timeline-group>

  <a-timeline-animation select="#text2" name="fadeout"></a-timeline-animation>
  <a-timeline-animation select="#text2" name="togglevisibleoff"></a-timeline-animation>

  <a-timeline-animation select="#text3" name="togglevisible"></a-timeline-animation>
  <a-timeline-group>
    <a-timeline-animation select="a-entity[mixin~=box]" name="color"></a-timeline-animation>
    <a-timeline-animation select="a-entity[mixin~=box]" name="rotate"></a-timeline-animation>
    <a-timeline-animation select="a-entity[mixin~=box]" name="position"></a-timeline-animation>
    <a-timeline-animation select="#text3" name="fadein"></a-timeline-animation>
    <a-timeline-animation select="#text3" name="positionin"></a-timeline-animation>
  </a-timeline-group>

  <a-timeline-animation select="#text3" name="positionout"></a-timeline-animation>
  <a-timeline-animation select="#text3" name="togglevisibleoff"></a-timeline-animation>

  <a-timeline-animation select="#text4" name="togglevisible"></a-timeline-animation>

  <a-timeline-group>
    <a-timeline-animation select="#sky" name="color"></a-timeline-animation>
    <a-timeline-animation select="#text4" name="fadein"></a-timeline-animation>
  </a-timeline-group>

  <a-timeline-animation select="#text4" name="fadeout" offset="500"></a-timeline-animation>
</a-timeline>

<a-mixin id="box"
  geometry="primitive: box"
  material="color: #AAA; opacity: 0"
  animation__fadein="property: material.opacity; dur: 2000; from: 0; to: 1; autoplay: false"
  animation__scale="property: scale; to: 2 20 2; dur: 2000; easing: easeInOutElastic; autoplay: false"
  animation__position="property: position; to: 0 30 -3; dur: 2000; autoplay: false"
  animation__color="property: material.color; from: #AAA; to: #222; dur: 2500; autoplay: false"
  animation__rotate="property: rotation; to: 0 360; dur: 1000; easing: easeInQuad; autoplay: false"
  scale="0.0001 0.0001 0.0001"
></a-mixin>

<a-mixin id="text"
  text="align: center; color: #333; width: 6; opacity: 0"
  animation__fadein="property: text.opacity; from: 0; to: 1; dur: 3000; easing: linear; autoplay: false"
  animation__fadeout="property: text.opacity; from: 1; to: 0; dur: 3000; easing: linear; autoplay: false"
  animation__togglevisible="property: visible; from: false; to: true; dur: 1; autoplay: false"
  animation__togglevisibleoff="property: visible; from: true; to: false; dur: 1; autoplay: false"
  position="0 2 -3"
  visible="false"></a-mixin>