Function createTransitionDemo

examples/src/canvas.ts:449–603

(game: Game)

}

function createTransitionDemo(game: Game) {
  const sectionLabel = new GameObject('transition-label', {
    position: { x: 30, y: 1570 },
  });
  sectionLabel.addComponent(
    new Text({
      text: '▎Transition + Event 动画与交互',
      style: { fontSize: 28, fill: ['#e94560'], fontFamily: 'Arial', fontWeight: 'bold' },
    }),
  );
  game.scene.addChild(sectionLabel);

  const hint = new GameObject('tap-hint', {
    position: { x: 50, y: 1630 },
  });
  hint.addComponent(
    new Text({
      text: '点击下方的爱心试试 👇',
      style: { fontSize: 22, fill: ['#aaaacc'], fontFamily: 'Arial' },
    }),
  );
  game.scene.addChild(hint);

  const heartBtn = new GameObject('heart-btn', {
    size: { width: 150, height: 150 },
    position: { x: 300, y: 1750 },
    origin: { x: 0.5, y: 0.5 },
    anchor: { x: 0.5, y: 0.5 },
  });
  heartBtn.addComponent(new Img({ resource: 'heart' }));

  const transition = heartBtn.addComponent(new Transition());
  transition.group = {
    bounce: [
      {
        name: 'scale.x',
        component: heartBtn.transform,
        values: [
          { time: 0, value: 1, tween: 'ease-out' },
          { time: 150, value: 1.4, tween: 'ease-in' },
          { time: 300, value: 1 },
        ],
      },
      {
        name: 'scale.y',
        component: heartBtn.transform,
        values: [
          { time: 0, value: 1, tween: 'ease-out' },
          { time: 150, value: 1.4, tween: 'ease-in' },
          { time: 300, value: 1 },
        ],
      },
    ],
    rotate: [
      {
        name: 'rotation',
        component: heartBtn.transform,
        values: [