CODEWITHSUNDEEP
aframe
Philosophist
Philosophist

Reputation: 103

How do I synchronize animations on an object using A-frame?

I have the following code in index.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>

      <!--  Meta  -->
      <meta charset="UTF-8" />
      <title>Alchem Figher!</title>

      <!--  Styles  -->
      <link rel="stylesheet" href="styles/index.processed.css">

      <!-- Scripts -->
      <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>

        <script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script>
      <script src="jquery.js"></script>
      <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.8.0/dist/aframe-extras.min.js"></script>
    </head>
    <body>

    <a-scene>
      <a-text value="Rational Bonding Presents" position="-3 7 -10" color="#EF2D5E">
        <a-text value="Alchem Fighter" height="30" width="20" position=".5 -.5 0" color="#02e8f4"></a-text>
      </a-text>
      <a-sphere id="proton" position="0 2.5 -6" radius=".05" color="#EF2D5E">
        <a-sphere id="eclouds1e1"  radius=".53" color="#02e8f4" opacity=".4">
        <a-entity id="s1e1" material="color: #02e8f4"  rotation="0 90 0"; geometry="primitive: torus; radiusTubular: 0.004" >
          <a-animation attribute="position" dur="250" from=".53 0 0" to="-.53 0 0" direction="alternate" repeat="indefinite"></a-animation>
          <a-animation attribute="geometry.radius"  dur="125" from=".01" to=".53" direction="alternate" repeat="indefinite"></a-animation>
        </a-entity>
      </a-sphere>
      <a-sky src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Earth_Western_Hemisphere.jpg"></a-sky>
    </a-scene>

      <!-- Scripts -->
      <script src="scripts/index.js"></script>
    </body>
    </html>

The torus id'd: s1e1

In here, <a-entity id="s1e1" material="color: #02e8f4" rotation="0 90 0"; geometry="primitive: torus; radiusTubular: 0.004" >, it has two animations attached to it. One for left to right movement, and another for expanding and contracting.

The question:

I would like these animations to synchronize so that the torus is expanded in the middle and contracted at the ends. It represents a visualization of an electron orbiting a single proton in a hydrogen atom, but I do not know how to approach that.

Upvotes: 0

Views: 322

Answers (1)

Dan S.
Dan S.

Reputation: 331

I was in the process of typing up a response, suggesting the use of the animation component (included in 0.9.0 core) rather than a-animation (deprecated, and removed in 0.9.0), which I would still recommend in general practice, but I realized that the animations still do in fact fall out of sync.

I'm assuming this is due to any of the following:

  • The extremely short interval (dur). The higher you set this, the less noticeable the timing issue.
  • A difference in overhead due to how the animated properties are targeted, e.g., raw property vs. attribute (using setAttribute under the hood).
  • IIRC, loops are set with either setTimeout or setInterval under the hood. Rather than rely on this, you may want to disable looping and trigger these animations by emitting a timed event so you can guarantee that they're executed simultaneously. You can create a custom component that does this using a throttled tick handler, setTimeout or setInterval.

I also suggest using either linear or easeInOutQuad for the easing as the default setting only eases in one direction, which can cause an undesirable effect.

Either way, you may want to submit this as a bug to the A-Frame repo: https://github.com/aframevr/aframe/issues/new

Upvotes: 2

Related Questions