How to use the decentraland-ecs/src.AnimationState function in decentraland-ecs

configureShapeEntityPositions([new Vector3(-1, 1, 8), new Vector3(17, 1, 8)], 0.8, new BoxShape())
configureShapeEntityPositions([new Vector3(8, 1, 16),
          new Vector3(8, 1, 0),
          new Vector3(8, 1, -16),
          new Vector3(8, 1, -24),
          new Vector3(24, 1, -24),
          new Vector3(40, 1, -24),
          new Vector3(40, 1, -40),
          new Vector3(24, 1, -40),
          new Vector3(24, 1, -24)
        ], 0.7, new BoxShape())

// PUSHABLE ANIMATED SHARK
let sharkEntity = configureShapeEntityPositions([new Vector3(31.5, 1.2, -16)], 0.7, new GLTFShape('models/shark.gltf'))
let animator = new Animator()
let clipSwim = new AnimationState('swim')
animator.addClip(clipSwim)
sharkEntity.addComponent(animator)
clipSwim.play()

let sharkLeftMovementTrigger = new Entity()
sharkLeftMovementTrigger.addComponentOrReplace(new BoxShape());
sharkLeftMovementTrigger.setParent(sharkEntity)
sharkLeftMovementTrigger.addComponent(
  new Transform({
    position: new Vector3(-0.25, 2, 0),
    scale: new Vector3(0.3, 1, 3)
  })
)
sharkLeftMovementTrigger.addComponent(
  new OnClick(e => {
    sharkEntity.getComponent(Transform).position.x += 1

// Add Shark
let shark = new Entity()
shark.addComponent(
  new Transform({
    position: new Vector3(10, 3, 10)
  })
)
shark.addComponent(new GLTFShape('models/shark.gltf'))

// Add animations
/*
NOTE: when you try to get an animation clip that hasn't been created
from a GLTFShape component, the clip is created automatically.
*/
const animator = new Animator()
let clipSwim = new AnimationState('swim')
let clipBite = new AnimationState('bite')
animator.addClip(clipBite)
animator.addClip(clipSwim)

shark.addComponent(animator)

// Activate swim animation
clipSwim.play()

// Add click interaction
let onClickComponent = new OnPointerDown(
  e => {
    clipBite.playing = !clipBite.playing
  }, {
    button: ActionButton.POINTER,
     hoverText: "OnPointerDown!", distance: 100 })