多帧动画答案

【问题标题】：Multiple aframe animations多帧动画
【发布时间】：2020-07-25 01:52:16
【问题描述】：

我已经建立了一个从 A 点到 B 点到 C 点的脚本动画等等。

动画通过 JS 触发（例如 document.getElementById('camera').emit('animazione_zero_avanti')）。

我正在制作这样的动画：

我想在第一个动画中添加一个 Z 轴旋转。一个动画可以有多个属性吗？

提前致谢。

【问题讨论】：

你能再添加一些代码吗？你定义的动画是什么样的？到目前为止你有什么？
我的错：这在某处丢失了：动画>
你能重新澄清一下这个问题吗？您想要一个具有多个属性的动画，还是您要旋转相机？
动画现在改变了相机的位置。我想在相同的动画中滑动相机并围绕 Z 轴旋转（这样地平面也会稍微倾斜）。我希望这会有所帮助。
您可以添加多个<a-animation> 元素。但请注意，由于生病，强烈不建议在 VR 中旋转相机或控制它。而且您可能会遇到麻烦，因为控件会不断更新相机。您也许可以为包装实体设置动画，但随后旋转的组合会很奇怪。

标签： aframe

【解决方案1】：

您可以添加多个元素。但请注意，由于生病，强烈不建议在 VR 中旋转相机或控制它。而且您可能会遇到麻烦，因为控件会不断更新相机。您也许可以为包装实体设置动画，但随后旋转的组合会很奇怪。

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

从aframe 版本0.9.0 开始，不再支持<a-animation>。

但您仍然可以使用属性animation 来使用和组合动画。

例如：

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

可以在CodePen 找到一个活生生的例子。

更多详情请访问a-frameAPI。

【讨论】：