07 · 过渡与动画

本章讲解过渡效果、属性动画和屏幕震动。

transition 过渡

transition 触发全屏过渡效果，常用于场景切换：

transition "fade" duration=1.5

参数	说明
效果名	fade / crossfade / fadeout / dissolve / slideleft / slideright / slideup / slidedown / fadeup / fadedown / blur / zoomin(或 zoom) / shrink / blink（大小写不敏感，无 none）
duration	过渡时长（秒，默认 0.5）

过渡效果

效果	说明
fade / crossfade	黑屏淡入淡出
fadeout	淡出
dissolve	交叉溶解（直接渐变）
slideleft / slideright / slideup / slidedown（含 *in 别名）	方向滑入
fadeup / fadedown	淡入 + 移动
blur	模糊过渡
zoomin / zoom / shrink	缩放进入 / 缩小退出
blink / blinkout	闪烁消失

使用场景

label chapter2:
  transition "fade" duration=2.0
  bg_switch "Images/forest.jpg"
  say "第二章开始。" speaker="旁白"

animate 属性动画

animate 对元素属性做补间动画：

animate "title_text" x 80 duration=1.0

参数	说明
第一个参数	元素 tag 名
第二个参数	动画属性（x/y/opacity/rotate/scale）
第三个参数	目标值（数字）
duration	时长（秒）
easing	缓动函数（可选）

可动画属性

属性	说明
x	水平位置
y	垂直位置
opacity	透明度（0~1）
rotate	旋转角度（度）
scale	缩放（1=原大小）

缓动函数

animate "title_text" y 50 duration=1.0 easing=EaseOutQuad

缓动用 EasingType 枚举成员名（PascalCase，大小写敏感），默认 EaseOutQuad：

缓动	说明
Linear	线性
EaseInQuad / EaseOutQuad / EaseInOutQuad	二次方缓动
EaseInCubic / EaseOutCubic / EaseInOutCubic	三次方缓动
EaseInBack / EaseOutBack / EaseInOutBack	回弹（back）
EaseInElastic / EaseOutElastic / EaseInOutElastic	弹性
EaseInBounce / EaseOutBounce / EaseInOutBounce	弹跳

示例：标题滑入

scene "title" type=menu
  text "我的游戏" tag="title" x=50% y=-10% size=56 color="#FFD700" halign=center
  // 从屏幕上方滑入
  animate "title" y 20 duration=1.0 easing=EaseOutQuad

shake 屏幕震动

shake duration=0.5 intensity=10

参数	说明
duration	震动时长（秒）
intensity	震动幅度（像素）

常用于战斗、爆炸等效果：

say "野狼扑了过来！" speaker="旁白"
shake duration=0.3 intensity=15
set "player.hp" {player.hp - 10}
say "受到了 10 点伤害！" speaker="系统"

show / hide 带过渡

show / hide 支持过渡效果：

show "overlay" with "fade" duration=0.5
hide "overlay" with "dissolve" duration=0.8

animate_block 多属性动画

animate_block 对单个元素同时设置多个属性动画：

animate_block "title" x=50 y=20 opacity=1 duration=1.0 easing=EaseOutQuad

所有属性同时动画，duration 和 easing 统一。支持的属性：x / y / opacity / rotate / scale。

动手练习

制作一个带动画的标题画面：

scene "animated_title" type=menu
  image "Images/door_zoom.jpg" x=0 y=0 width=100% height=100% opacity=0.3
  text "我的游戏" tag="title" x=50% y=-10% size=56 color="#FFD700" halign=center
  text "副标题" tag="subtitle" x=50% y=30% size=20 color="#AAAAAA" halign=center opacity=0
  button "开始" tag="start_btn" x=50% y=80% width=200 height=44 color="#88CCFF" nav="next" halign=center opacity=0

label animate_in:
  // 标题从上方滑入
  animate "title" y 20 duration=1.0 easing=EaseOutQuad
  // 副标题淡入
  animate "subtitle" opacity 1 duration=0.8
  // 按钮淡入
  animate "start_btn" opacity 1 duration=0.5
  say "点击开始进入游戏。" speaker="旁白"

下一步

动画掌握了！下一章学习音频系统——给游戏加上声音。