I have an artifact of the material.opacity attribute popping up during animation loop playback

Question

I have an artifact of the material.opacity attribute popping up during animation loop playback

I seem to have an artifact in the opacity animation on every other animation loop. The order of the segments of the material.opacity a-animation seems to be messed up somehow. Is there a way to implement a material.opacity animation so that the sequences persist for each loop? Please see the animation of the codes.

<html>

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

<body>
  <a-scene>
    <a-assets>
      <a-mixin geometry="height:5" id="tall"></a-mixin>
      <a-mixin geometry="width:5" id="wide"></a-mixin>
      <a-mixin geometry="height:2" id="short"></a-mixin>
      <a-mixin geometry="width:2" id="narrow"></a-mixin>
      <a-mixin geometry="primitive:box" id="cube"></a-mixin>
      <a-mixin material="color:red" id="red"></a-mixin>
    </a-assets>
    <a-entity geometry="primitive:torusKnot;p:3;q:5" material="color:yellow" position="0 0 -10">
      <a-animation attribute="material.color" delay="0" from="yellow" to="blue" repeat="indefinite" dur="3600"></a-animation>
      <a-animation attribute="material.opacity" delay="0" from="1" to="0.75" repeat="indefinite" dur="1200"></a-animation>
      <a-animation attribute="material.opacity" delay="1200" from="0.75" to="0.25" repeat="indefinite" dur="600"></a-animation>
      <a-animation attribute="material.opacity" delay="1800" from="0.25" to=".75" repeat="indefinite" dur="600"></a-animation>
      <a-animation attribute="material.opacity" delay="2400" from="0.75" to="1" repeat="indefinite" dur="1200"></a-animation>
    </a-entity>
    <a-entity mixin="cube tall narrow red" geometry="depth:3" position="0 6 -20" light="type: point; intensity:1">
      <a-animation attribute="rotation" from="0 0 0" to="0 0 360" repeat="indefinite" dur="3600"></a-animation>
      <a-animation attribute="position" from="0 6 -20" to="0 6 0" repeat="indefinite" dur="3600"></a-animation>
      <a-animation attribute="scale" from="1 1 1" to="0.1 0.1 0.1" repeat="indefinite" dur="3600"></a-animation>
    </a-entity>
    <a-sky color="#abc"></a-sky>
  </a-scene>
</body>

</html>

Run code

+3

loops opacity animation artifacts aframe

deluxda May 07 '17 at 22:02

source to share

No one has answered this question yet

Check out similar questions:

168

Have reloadData to animate the UITableView on change

35

How to set up css3 animation to loop

12

Powerpoint loop animation series

12

Opacity of SVG animation in loop

nine

Android - Artifacts using animation

6

Bamboo artifacts collecting entire folders

3

Play markup and deployment animation

1

Animated JavaFX polyhedral artifacts

1

My animation function is playable

0

How to loop A-Frame animation forever using duration attribute

I have an artifact of the material.opacity attribute popping up during animation loop playback

More articles: