《Cocos 游戏开发入门》8.3 属性动画与状态驱动表现

// 反例：表现逻辑与游戏逻辑纠缠
if (hero.hurtTimer > 0) {
  setFrame('hurt');
} else if (!hero.onGround) {
  setFrame(hero.vy > 0 ? 'jump_up' : 'jump_down');
} else if (Math.abs(hero.vx) > 1) {
  setFrame('run');
} else {
  setFrame('idle');
}

// src/anim/hero-states.ts
export type HeroState = 'idle' | 'run' | 'jump' | 'hurt';

export interface TransitionRule {
  to: HeroState;
  /** 该转移的优先级：数值越大越能打断低优先级的当前状态 */
  priority: number;
  /** 进入该状态时的过渡时长（秒） */
  blend: number;
}

// src/anim/state-def.ts
import { HeroState } from './hero-states';

export interface StateDef {
  clip: string;
  loop: boolean;
  /** 进入该状态时的属性目标，由 8.2 的补间驱动 */
  props?: Record<string, number>;
}

export const HERO_STATES: Record<HeroState, StateDef> = {
  idle: { clip: 'idle', loop: true, props: { scale: 1 } },
  run: { clip: 'run', loop: true, props: { scale: 1 } },
  jump: { clip: 'jump', loop: false, props: { scale: 0.92 } },
  hurt: { clip: 'hurt', loop: false, props: { scale: 1.1 } },
};

// 权重从 0 线性升到 1，旧状态权重为 1 - 权重
const w = Math.min(blendElapsed / blendDuration, 1);
// 混合两个状态的属性值
const value = oldValue * (1 - w) + newValue * w;

// src/anim/blend.ts
export function blendValue(from: number, to: number, w: number): number {
  return from + (to - from) * w;
}

// 打断时，以当前渲染值为新起点
const interruptedFrom = this.currentScale;
this.blendFrom = interruptedFrom;
this.blendTo = targetScale;
this.blendElapsed = 0;

// src/anim/hero-presenter.ts
import { FramePlayer } from './frame-player';
import { FrameClip } from './frame-clip';
import { HeroState } from './hero-states';
import { HERO_STATES } from './state-def';

export interface HeroClips {
  [clip: string]: FrameClip;
}

export class HeroPresenter {
  private clips: HeroClips;
  private player: FramePlayer;
  private state: HeroState = 'idle';
  private statePriority = 0;

  /** 属性混合状态 */
  private scale = 1;
  private blendFrom = 1;
  private blendTo = 1;
  private blendElapsed = 0;
  private blendDuration = 0;

  constructor(clips: HeroClips) {
    this.clips = clips;
    this.player = new FramePlayer(clips.idle);
  }

  get currentState(): HeroState {
    return this.state;
  }

  get scaleValue(): number {
    return this.scale;
  }

  /** 请求切换状态；被更高优先级打断时忽略 */
  request(next: HeroState, priority: number, blend = 0.12): boolean {
    if (priority < this.statePriority && this.state !== next) {
      return false;
    }
    const def = HERO_STATES[next];
    this.state = next;
    this.statePriority = priority;
    this.player.clip = this.clips[def.clip];
    this.player.reset();
    // 属性过渡：从当前值出发，避免跳变
    this.blendFrom = this.scale;
    this.blendTo = def.props?.scale ?? 1;
    this.blendElapsed = 0;
    this.blendDuration = blend;
    return true;
  }

  update(deltaTime: number): void {
    this.player.update(deltaTime);
    if (this.blendDuration > 0 && this.blendElapsed < this.blendDuration) {
      this.blendElapsed += deltaTime;
      const w = Math.min(this.blendElapsed / this.blendDuration, 1);
      this.scale = this.blendFrom + (this.blendTo - this.blendFrom) * w;
    }
  }
}

// assets/scripts/HeroPresenter.ts
import { _decorator, Component, Animation, AnimationState, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('HeroPresenter')
export class HeroPresenter extends Component {
  @property(Animation)
  anim: Animation | null = null;

  private priority = 0;

  request(state: string, prio: number, blend = 0.12): boolean {
    if (prio < this.priority) return false;
    this.priority = prio;
    this.anim?.crossFade(state, blend);
    return true;
  }

  onHurt() {
    this.request('hurt', 3, 0.08);
    this.node.setScale(new Vec3(1.1, 1.1, 1));
  }

  onRun() {
    const state: AnimationState | null = this.anim?.getState('run') ?? null;
    if (state) state.speed = 1.4;
    this.request('run', 1);
  }
}