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

Question

我想知道我是否可以让一个对象（如长方体或球体）做 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>

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

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

Is it possible to make a single entity perform multiple animations?

animation

aframe