09｜动画系统

import gsap from 'gsap'

/**
 * gsap.to() — 从当前状态动画到目标状态
 * 最常用的动画方法
 *
 * 关键参数：
 * - duration：动画时长（秒）
 * - ease：缓动曲线（如 "power2.out"）
 * - repeat：重复次数（-1 = 无限）
 * - yoyo：来回播放
 * - delay：延迟开始
 * - onComplete / onStart：回调
 */
gsap.to(cube.position, {
  x: 3,
  duration: 1.5,
  ease: 'power2.inOut',
  repeat: -1,    // 无限重复
  yoyo: true,    // 来回播放
})

// 回调
gsap.to(cube.position, {
  x: 3,
  duration: 1,
  onComplete: () => console.log('动画完成'),
  onStart: () => console.log('动画开始'),
})

/**
 * gsap.from() — 从指定状态动画到当前状态
 * 适合做入场动画
 *
 * 注意：from() 会立即应用初始值（immediateRender: true）
 */
gsap.from(cube.scale, {
  x: 0, y: 0, z: 0,
  duration: 1.5,
  ease: 'elastic.out(1, 0.3)',  // 弹性回弹
})

/**
 * gsap.timeline() — 时间线编排多个动画
 *
 * 位置参数（第三个参数）：
 * - 绝对时间：1（第 1 秒）
 * - 相对时间："+=" 前一个动画结束后 / "-=" 前一个动画结束前
 * - "<" 与前一个动画同时开始
 */
const tl = gsap.timeline({
  defaults: { duration: 0.8, ease: 'power2.out' },
  repeat: -1,
  yoyo: true,
})

// 阶段 1：向上跳
tl.to(group.position, { y: 2 })
  // 阶段 2：与上一动画同时开始，旋转 180°
  .to(group.rotation, { y: Math.PI }, '<')
  // 阶段 3：在阶段 2 结束前 0.4 秒就开始放大
  .to(group.scale, { x: 1.2, y: 1.2, z: 1.2 }, '-=0.4')

/**
 * KeyframeTrack — 手动关键帧动画
 *
 * 四种类型：
 * - VectorKeyframeTrack：位置、缩放（三维向量）
 * - QuaternionKeyframeTrack：旋转（四元数）
 * - ColorKeyframeTrack：颜色（离散插值）
 * - NumberKeyframeTrack：数值（如透明度）
 */

// 位置关键帧（VectorKeyframeTrack）
// 原点 → 右上 → 左下 → 回原点
const positionKF = new THREE.VectorKeyframeTrack(
  '.position',
  [0, 1, 2, 3],
  [
    0, 0, 0,       // t=0: 原点
    5, 5, 0,       // t=1: 右上
    -5, -3, 0,     // t=2: 左下
    0, 0, 0,       // t=3: 回原点
  ],
)

// 旋转关键帧（四元数）：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,
  ],
)

// 颜色关键帧（离散插值）：红 → 绿 → 蓝，瞬间切换
const colorKF = new THREE.ColorKeyframeTrack(
  '.material.color',
  [0, 1, 2],
  [1, 0, 0, 0, 1, 0, 0, 0, 1],
  THREE.InterpolateDiscrete,
)

// 透明度关键帧（线性插值）：1 → 0 → 1，平滑过渡
const opacityKF = new THREE.NumberKeyframeTrack(
  '.material.opacity',
  [0, 1, 2],
  [1, 0, 1],
)

// 组合成动画片段
const clip = new THREE.AnimationClip('myAnimation', 3, [
  positionKF,
  quaternionKF,
  colorKF,
  opacityKF,
])

// 用 AnimationMixer 播放
const mixer = new THREE.AnimationMixer(cube)
const action = mixer.clipAction(clip)
action.play()

/**
 * AnimationObjectGroup — 让多个对象共享同一个动画状态
 *
 * 核心价值：关键帧求值只做一次，结果广播给所有对象。
 * 对象越多，"广播"比起"重复求值"的优势越大。
 */
const animationGroup = new THREE.AnimationObjectGroup()

// 25 个立方体同时挂到 scene（渲染）和 animationGroup（共享动画）
for (let i = 0; i < 5; i++) {
  for (let j = 0; j < 5; j++) {
    const mesh = new THREE.Mesh(geometry, material)
    mesh.position.x = 32 - (16 * i)
    mesh.position.z = 32 - (16 * j)
    scene.add(mesh)
    animationGroup.add(mesh)  // 加入共享组
  }
}

// mixer 绑定到 group 而不是单个 mesh
const mixer = new THREE.AnimationMixer(animationGroup)
const action = mixer.clipAction(clip)
action.play()

/**
 * AnimationMixer — 播放模型自带的动画
 *
 * 基本流程：
 * 1. 创建 mixer
 * 2. 获取 clip
 * 3. 创建 action
 * 4. 播放
 * 5. 每帧更新
 */
async function loadAnimatedModel(scene: THREE.Scene) {
  const loader = new GLTFLoader()
  const gltf = await loader.loadAsync('/models/watch/diegoWatchAnimation4.gltf')
  const model = gltf.scene

  // 自动缩放居中
  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)
  const newBox = new THREE.Box3().setFromObject(model)
  model.position.sub(newBox.getCenter(new THREE.Vector3()))

  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)  // 无限循环
action.setLoop(THREE.LoopOnce, 1)           // 只播放一次
action.setLoop(THREE.LoopPingPong, 3)       // 来回播放 3 次

mixer.timeScale = 0    // 暂停
mixer.timeScale = 1    // 恢复
mixer.timeScale = 0.5  // 慢放（0.5 倍速）
mixer.timeScale = 2    // 快进（2 倍速）
mixer.timeScale = -1   // 倒放

// 设置动画权重（0-1）
action.weight = 0.5  // 50% 混合

// 多动画混合
const walkAction = mixer.clipAction(walkClip)
const runAction = mixer.clipAction(runClip)

walkAction.weight = 0.7  // 70% 走路
runAction.weight = 0.3   // 30% 跑步

walkAction.play()
runAction.play()

// 监听动画完成事件
action.getMixer().addEventListener('finished', (event) => {
  console.log('动画播放完成:', event.action.getClip().name)
})

// 监听循环完成事件
action.getMixer().addEventListener('loop', (event) => {
  console.log('循环完成:', event.action.getClip().name)
})

// Normal 模式：动画值直接覆盖目标属性
const clip1 = new THREE.AnimationClip('walk', 2, [walkTrack])

// Additive 模式：动画值是相对于参照姿态的偏移
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)
}