是否可以让单个实体执行多个动画？答案

【问题标题】：Is it possible to make a single entity perform multiple animations?是否可以让单个实体执行多个动画？
【发布时间】：2021-07-08 22:01:40
【问题描述】：

我想知道我是否可以制作一个对象，比如一个盒子或球体，做 2 个动画，比如旋转和颜色。我知道你可以在动画属性的属性部分设置这些，但是如果我尝试将多个动画属性放在一个对象上，或者如果我尝试将 2 个属性放在 1 个动画属性中，它要么不动画，要么只有做其中一个动画。这是我正在使用的代码，如果可能的话，如果你们中的任何人都可以编辑它以使其工作，我将不胜感激：

<!DOCTYPE html>
<html>
    <head>
        <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
    </head>
    <body>
        <a-scene>
        <a-sky color="lightblue"></a-sky>
        <a-box position="0 0 -5" width="2" depth="2" height="2" color= rgb(0,0,0)
        animation="
        property: rotation;
        from: 0 0 0;
        to: -360 -360 -360;
        loop: true;
        dur: 3000;
        dir: alternate;
        property: color;
        from: rgb(0,0,0);
        to: rgb(255,255,255);
        loop: true;
        dur: 3000;
        dir: alternate;"></a-box>
        </a-scene>
    </body>
</html>

【问题讨论】：

标签： animation aframe

【解决方案1】：

你需要将动画指令拆分成separate animation components，应该是这样的：

animation__<id>="stuff"
// like this:
animation__first="single animation related stuff"
animation__second="another single animation related stuff"

您的代码应该看起来更像这样：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>

<a-scene>
  <a-sky color="lightblue"></a-sky>
  <a-box position="0 0 -5" width="2" depth="2" height="2" color=rgb(0,0,0) 
  
        animation__rotation="
        property: rotation;
        from: 0 0 0;
        to: -360 -360 -360;
        loop: true;
        dur: 3000;
        dir: alternate;"
        
        animation__color="
        property: color;
        from: rgb(0,0,0);
        to: rgb(255,255,255);
        loop: true;
        dur: 3000;
        dir: alternate;"></a-box>
</a-scene>

【讨论】：