Aframe如何实现球体每3秒瞬时变色而非3秒渐变动画效果

你原有代码的动画设置了3秒的过渡时长，默认是线性渐变效果，所以无法实现瞬时切换。只需要修改球体的动画配置即可实现需求，核心是通过steps(1)缓动函数取消中间过渡过程。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <title>Wormhole</title>
</head>
<body>
    <a-scene>
        <!--Sky-->
        <a-sky color="lightblue"></a-sky>
       <!--Worm-->
       <a-cylinder radius="0.5" height="3" rotation="0 0 90"
            color="lightpink" position="-15 1.5 0"
        animation="property: position;
        dur: 3000;
        from: -15 1.5 0;
        to: 2 1 -10;
        loop: true">
        </a-cylinder>
       
      <!--Worm2-->
      <a-cylinder radius="0.5" height="3" rotation="0 0 90"
            color="lightpink" position="15 1.5 0"
        animation="property: position;
        dur: 3000;
        from: 15 1.5 0;
        to: 2 1 -10;
        loop: true">
      </a-cylinder>
       
       <!--Wormhole 修改部分-->
       <a-sphere color="gold" radius="3" position="2 1 -10" 
        animation="property: material.color; type: color;
        dur: 3000;
        from: gold; to: black;
        loop: true;
        easing: steps(1);
        direction: alternate">                 
       </a-sphere>
    </a-scene>
</body>
</html>

修改点说明 #

• 简化颜色属性绑定路径为material.color，符合A-Frame属性绑定规范
• 新增easing: steps(1)配置：整个3秒动画周期内仅执行1次状态跳转，没有中间渐变过渡
• 新增direction: alternate配置：动画循环时自动反向运行，实现金色和黑色的交替切换
• 移除冗余配置repeat: indefinite，loop: true已经可以实现无限循环效果

内容的提问来源于stack exchange，提问作者Bosnia