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

Question

我将在我的 A 型框架 Web 应用程序中制作一些不确定的动画。我的动画必须无限播放并且必须有溜溜球效果。在 3000 毫秒内形成 0.25 到 0.75 的不透明度。为此，我使用下一个代码：

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 中站着这个：

When we define an alternating direction, the animation will go back and forth between the from and to values like a yo-yo. Alternating directions only take affect when we repeat the animation.

如果我使用数字 （例如数字 x） 而不是不确定的，溜溜球效果很好，但在 x 时停止-重复次数。

我该怎么做才能解决这个问题？

Answer 1

我认为通过丢弃填充属性可以解决这个问题

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

它应该在不播放时处理动画，我想当回放不确定时，它一直在播放，tween.js 或 three.js 不喜欢它。

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

我尝试将其设置为 'none' 或其他设置，但我只是在抛出时才开始工作。

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

Yo-yo effect on animation don't work when repeat is indefinite and direction is alternate using A-frame

aframe