Question

我会在我的A-frame Web应用程序中制作一些无限制的动画。我的动画必须播放无限，并且必须具有溜溜球效果。形成0.25至0.75的不透明度，每个背面为3000毫秒。为此，我使用下一个代码：

let box = document.createElement('a-box');
box.setAttribute('src', '#outer');
box.setAttribute('position', '0 0 -5');
box.setAttribute('color', 'red');

let anim = document.createElement('a-animation');
anim.setAttribute('attribute', 'opacity');
anim.setAttribute('from', '0.25');
anim.setAttribute('to', '0.75');
anim.setAttribute('fill', 'both');
anim.setAttribute('repeat', 'indefinite');
anim.setAttribute('dur', '3000');
anim.setAttribute('direction', 'alternate');
box.appendChild(anim);

document.getElementsByTagName('a-scene')[0].appendChild(box);

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

<a-scene></a-scene>

就像你可以看到这不起作用。它在3000毫秒内从0.25到0.75并立即回到0.25以再次重复。在documentation of A-frame的立场中：

当我们定义交替方向时，动画将在from和to值之间来回移动，就像溜溜球一样。交替方向仅在重复动画时生效。

如果我使用数字（例如数字x）而不是无限期，则溜溜球效果效果很好，但在x次重复时会停止。< / p>

我可以做些什么来解决这个问题？

Answer 1

我认为通过抛出填充属性

来解决这个问题

anim.setAttribute('fill', 'both');

它应该在没有播放的情况下处理动画，我猜当重播是无限期的时候，它一直播放并且tween.js或者three.js都不喜欢它。

基于您的代码的工作演示： https://codepen.io/gftruj/pen/qjdZmw

我尝试将它设置为'none'或者其他什么，但我只是在抛出时才能使它工作。

当重复是不确定的并且使用A帧交替方向时，对动画的溜溜球效果不起作用

1 个答案: