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

Question

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

Answer 1

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>