09 | Animation System

import gsap from 'gsap'

/**
 * gsap.to() — Animate from current state to target state
 * Most commonly used animation method
 */
gsap.to(cube.position, {
  x: 3,
  duration: 1.5,
  ease: 'power2.inOut',
  repeat: -1,    // Infinite repeat
  yoyo: true,    // Play back and forth
})

/**
 * gsap.from() — Animate from specified state to current state
 * Good for entry animations
 *
 * Note: from() applies initial values immediately (immediateRender: true)
 */
gsap.from(cube.scale, {
  x: 0, y: 0, z: 0,
  duration: 1.5,
  ease: 'elastic.out(1, 0.3)',  // Elastic bounce
})

/**
 * gsap.timeline() — Orchestrate multiple animations on a timeline
 *
 * Position parameters (third argument):
 * - Absolute: 1 (at 1 second)
 * - Relative: "+=" after previous / "-=" before previous ends
 * - "<" start with previous
 */
const tl = gsap.timeline({
  defaults: { duration: 0.8, ease: 'power2.out' },
  repeat: -1,
  yoyo: true,
})

tl.to(group.position, { y: 2 })
  .to(group.rotation, { y: Math.PI }, '<')
  .to(group.scale, { x: 1.2, y: 1.2, z: 1.2 }, '-=0.4')

// Position keyframe (VectorKeyframeTrack)
// Origin → top-right → bottom-left → back to origin
const positionKF = new THREE.VectorKeyframeTrack(
  '.position',
  [0, 1, 2, 3],
  [
    0, 0, 0,       // t=0: origin
    5, 5, 0,       // t=1: top-right
    -5, -3, 0,     // t=2: bottom-left
    0, 0, 0,       // t=3: back to origin
  ],
)

// Rotation keyframe (quaternion): 0° → 180° → 0°
const xAxis = new THREE.Vector3(1, 0, 0)
const qInitial = new THREE.Quaternion().setFromAxisAngle(xAxis, 0)
const qFinal = new THREE.Quaternion().setFromAxisAngle(xAxis, Math.PI)

const quaternionKF = new THREE.QuaternionKeyframeTrack(
  '.quaternion',
  [0, 1, 2],
  [
    qInitial.x, qInitial.y, qInitial.z, qInitial.w,
    qFinal.x, qFinal.y, qFinal.z, qFinal.w,
    qInitial.x, qInitial.y, qInitial.z, qInitial.w,
  ],
)

// Color keyframe (discrete): red → green → blue, instant switch
const colorKF = new THREE.ColorKeyframeTrack(
  '.material.color',
  [0, 1, 2],
  [1, 0, 0, 0, 1, 0, 0, 0, 1],
  THREE.InterpolateDiscrete,
)

// Opacity keyframe (linear): 1 → 0 → 1, smooth transition
const opacityKF = new THREE.NumberKeyframeTrack(
  '.material.opacity',
  [0, 1, 2],
  [1, 0, 1],
)

// Combine into AnimationClip
const clip = new THREE.AnimationClip('myAnimation', 3, [
  positionKF,
  quaternionKF,
  colorKF,
  opacityKF,
])

// Play with AnimationMixer
const mixer = new THREE.AnimationMixer(cube)
const action = mixer.clipAction(clip)
action.play()

/**
 * AnimationObjectGroup — Share animation state across multiple objects
 *
 * Core value: keyframe evaluation happens once, results broadcast to all objects.
 * The more objects, the greater the "broadcast" advantage over "repeated evaluation".
 */
const animationGroup = new THREE.AnimationObjectGroup()

for (let i = 0; i < 5; i++) {
  for (let j = 0; j < 5; j++) {
    const mesh = new THREE.Mesh(geometry, material)
    scene.add(mesh)
    animationGroup.add(mesh)  // Join shared group
  }
}

// Mixer binds to group, not individual mesh
const mixer = new THREE.AnimationMixer(animationGroup)

/**
 * AnimationMixer — Play model's built-in animations
 */
async function loadAnimatedModel(scene: THREE.Scene) {
  const loader = new GLTFLoader()
  const gltf = await loader.loadAsync('/models/watch/diegoWatchAnimation4.gltf')
  const model = gltf.scene

  // Auto scale and center
  const box = new THREE.Box3().setFromObject(model)
  const maxDim = Math.max(box.getSize().x, box.getSize().y, box.getSize().z)
  model.scale.setScalar(10 / maxDim)

  scene.add(model)

  if (gltf.animations.length > 0) {
    const mixer = new THREE.AnimationMixer(model)
    const action = mixer.clipAction(gltf.animations[0])
    action.setLoop(THREE.LoopRepeat, Infinity)
    action.play()
    return { mixer, model }
  }

  return { mixer: null, model }
}

action.setLoop(THREE.LoopRepeat, Infinity)  // Infinite loop
action.setLoop(THREE.LoopOnce, 1)           // Play once
action.setLoop(THREE.LoopPingPong, 3)       // Ping-pong 3 times

mixer.timeScale = 0    // Pause
mixer.timeScale = 1    // Resume
mixer.timeScale = 0.5  // Slow motion (0.5x)
mixer.timeScale = 2    // Fast forward (2x)
mixer.timeScale = -1   // Reverse

action.weight = 0.5  // 50% blend

// Multi-animation blend
const walkAction = mixer.clipAction(walkClip)
const runAction = mixer.clipAction(runClip)
walkAction.weight = 0.7  // 70% walk
runAction.weight = 0.3   // 30% run
walkAction.play()
runAction.play()

// Listen for animation complete
action.getMixer().addEventListener('finished', (event) => {
  console.log('Animation finished:', event.action.getClip().name)
})

// Listen for loop complete
action.getMixer().addEventListener('loop', (event) => {
  console.log('Loop complete:', event.action.getClip().name)
})

const clip1 = new THREE.AnimationClip('walk', 2, [walkTrack])
const clip2 = new THREE.AnimationClip('wave', 1, [waveTrack], THREE.AdditiveAnimationBlendMode)

let currentAnim: gsap.core.Tween | null = null
currentAnim = gsap.to(cube.position, { x: 3, duration: 1 })

currentAnim.pause()
currentAnim.play()
currentAnim.reverse()
currentAnim.kill()

function killCurrent() {
  if (currentAnim) {
    currentAnim.kill()
    currentAnim = null
  }
  cube.position.set(-3, 0.5, 0)
  cube.rotation.set(0, 0, 0)
  cube.scale.set(1, 1, 1)
}