animation in dcl

scene.tsx

// tslint:disable:ter-indent
import { ScriptableScene, createElement } from 'metaverse-api'

export default class SharkAnimation extends ScriptableScene {
  state = {
    bitestate: 0
  }

  async sceneDidMount() {
    this.eventSubscriber.on(`muhshark_click`, xxx => {
      // tslint:disable-next-line:no-console
      console.log(xxx)
      this.clickedOnShark()
    })
  }

  clickedOnShark() {
    this.setState({ bitestate: (this.state.bitestate + 1) % 4 })
  }

  async render() {
    return (
      <scene>
        <box id="muhshark" position={{ x: 5, y: 0, z: 5 }} />
        <gltf-model
          position={{ x: 5, y: 3, z: 5 }}
          scale={0.5}
          src="models/shark_anim.gltf"
          skeletalAnimation={
            [
              [
                { clip: 'shark_skeleton_bite', weight: 0.1, playing: true, loop: true },
                { clip: 'shark_skeleton_swim', weight: 0.2, playing: true, loop: true }
              ],
              [
                { clip: 'shark_skeleton_bite', weight: 0, playing: true },
                { clip: 'shark_skeleton_swim', weight: 1, playing: true }
              ],
              [
                { clip: 'shark_skeleton_bite', weight: 1, playing: true },
                { clip: 'shark_skeleton_swim', weight: 0.7, playing: true }
              ],
              [
                { clip: 'shark_skeleton_bite', weight: 1, playing: false },
                { clip: 'shark_skeleton_swim', weight: 0.7, playing: true }
              ]
            ][this.state.bitestate]
          }
        />
        <gltf-model
          id="box-animated"
          position={{ x: 2, y: 0, z: -2 }}
          src="models/BoxAnimated.gltf"
          skeletalAnimation={[{ clip: 0, playing: true }]}
        />
      </scene>
    )
  }
}