Rotation Animation doesn't work

[Herman_Ptacnik]

I want to make a two-part animation for an entity.

1. Animation position from right to left.
2. Rotate the object 180 degrees.

The issue is that after the position animation plays, then the rotation animation either skips to the last frame of the animation, or it doesn’t play.

I even tried removing the first animation before playing the second one, but it still didn’t work.

The good thing is that it is an easy issue to recreate. Here’s my script if someone wants to test this in an empty project:

// This is a component file. You can use this file to define a custom component for your project.
// This component will appear as a custom component in the editor.

import * as ecs from '@8thwall/ecs'  // This is how you access the ecs library.

ecs.registerComponent({
  name: 'Animation',
  schema: {
    startingX: ecs.f32,
    startingY: ecs.f32,
    startingZ: ecs.f32,
  },
  schemaDefaults: {
    startingX: 2,
    startingY: 0.5,
    startingZ: 0,
  },
  data: {
    // Add data that cannot be configured outside of the component.
  },
  add: (world, component) => {
    const {eid, schemaAttribute} = component

    const PlayShowScoreAnimation = () => {
      const {startingX, startingY, startingZ} = schemaAttribute.get(eid)
      const cursor = schemaAttribute.cursor(eid)
      // Position Animation (Move from right to left)
      ecs.PositionAnimation.set(world, eid, {
        fromX: startingX,
        fromY: startingY,
        fromZ: startingZ,

        toX: 0,
        toY: startingY,
        toZ: startingZ,
        easeIn: true,
        easeOut: true,
        loop: false,
        easingFunction: 'Quadratic',
        duration: 2000,
      })
      // Rotation Animation (Rotate 180 degrees in Y)

      const playSecondAnim = () => {
        console.log('started second anim')
        ecs.PositionAnimation.remove(world, eid)
        ecs.RotateAnimation.set(world, eid, {
          fromX: 0,
          fromY: 0,
          fromZ: 0,

          toX: 0,
          toY: 180,
          toZ: 0,
          easeIn: true,
          easeOut: true,
          easingFunction: 'Quadratic',
          duration: 2000,
          loop: false,
        })
      }
      world.time.setTimeout(playSecondAnim, 2000)
    }
    PlayShowScoreAnimation()
  },
})

[Maria_Fernanda]

Yes, I’m having the same issue but I haven’t found a fix.

[GeorgeButler]

It seems like there’s a bug with how rotation animations use the from values. I’ve done some testing and noticed that it works correctly when you set autoFrom: true instead of manually putting in the starting rotation. Also I’ve added shortestPath: false so that it doesn’t pick the shortest path to the rotation, sometimes this can cause the animation to be different than what you’d expect.

Additionally I would recommend migrating to a State Machine for this use-case:

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
  name: 'animation-sample',
  schema: {
    startingX: ecs.f32,
    startingY: ecs.f32,
    startingZ: ecs.f32,
  },
  schemaDefaults: {
    startingX: 2,
    startingY: 0.5,
    startingZ: 0,
  },
  data: {
  },
  stateMachine: ({world, eid, schemaAttribute}) => {
    ecs.defineState('loading')
      .initial()
      .wait(2000, 'anim1')

    ecs.defineState('anim1')
      .onEnter(() => {
        const {startingX, startingY, startingZ} = schemaAttribute.get(eid)

        ecs.PositionAnimation.set(world, eid, {
          fromX: startingX,
          fromY: startingY,
          fromZ: startingZ,
          toX: 0,
          toY: startingY,
          toZ: startingZ,
          easeIn: true,
          easeOut: true,
          loop: false,
          easingFunction: 'Quadratic',
          duration: 2000,
        })
      })
      .onExit(() => {
        ecs.PositionAnimation.remove(world, eid)
      })
      .wait(2000, 'anim2')

    ecs.defineState('anim2')
      .onEnter(() => {
        ecs.RotateAnimation.set(world, eid, {
          autoFrom: true,
          toX: 0,
          toY: 180,
          toZ: 0,
          easeIn: true,
          easeOut: true,
          easingFunction: 'Quadratic',
          duration: 2000,
          loop: false,
          shortestPath: false,
        })
      })
      .onExit(() => {
        ecs.Quaternion.set(world, eid, ecs.math.quat.zero())
        ecs.RotateAnimation.remove(world, eid)
      })
      .wait(2000, 'anim1')
  },
  add: (world, component) => {
  },
  tick: (world, component) => {
  },
  remove: (world, component) => {
  },
})