按键动画

按键动画通过按键节点的 animation 参数引用动画节点。animation 是动画节点名称数组，可以同时引用多个动画。

qButton:
  animation:
    - scaleAnimation
    - cartoonAnimation
    - physicsAnimation

scaleAnimation:
  animationType: scale

animation

类型：String[]

必选项：否

配置在按键节点中，用于引用同级动画节点。当按键按下时，引用的动画会被触发。

注意：animation 只在按键节点中有效。

animationType

类型：'scale' | 'cartoon' | 'physics'

必选项：是

配置在动画节点中，用于标识动画类型。

缩放动画 scale

缩放动画用于在按键按下时缩小，释放时恢复。

scaleAnimation:
  animationType: scale
  isAutoReverse: true
  scale: 0.87
  pressDuration: 0.04
  releaseDuration: 0.08

参数	类型	默认值	说明
isAutoReverse	Bool	false	是否在按下时自动完成「缩小 -> 恢复」的完整动画。
scale	Float	0.87	按下时缩放比例。
pressDuration	Float	0.04	按下动画持续时间，单位为秒。
releaseDuration	Float	0.08	释放动画持续时间，单位为秒。

isAutoReverse 的行为：

• true：只在按下时触发，连续播放缩小和恢复动画。
• false：按下时播放缩小动画，释放时播放恢复动画。

图片播放动画 cartoon

图片播放动画通过一组图片帧实现逐帧动画。

cartoonAnimation:
  animationType: cartoon
  fps: 30
  targetScale: 0.3
  zPosition: above
  images:
    - frame1.png
    - frame2.png

参数	类型	默认值	说明
fps	Int	30	动画帧率。
targetScale	Float	无	图片缩放比例；不设置时不缩放。
zPosition	'above'、'below' 或 Float	above	动画图层层级。
images	String[]	无	帧图片文件名数组，按播放顺序排列。

物理动画 physics

物理动画用于描述图片移动、旋转、透明度变化等效果。

physicsAnimation:
  animationType: physics
  duration: 0.6
  randomImage: true
  targetScale: 0.3
  images:
    - 01.png
    - 02.png
  startPosition: { x: 0, y: 0 }
  endPosition: { x: 0, y: -10 }
  randomPosition: { x: 0, y: 0 }
  useOpacity: true
  startOpacity: 1.0
  endOpacity: 0.1
  useRotation: true
  startAngle: 0
  endAngle: 360
  randomAngle: 50

参数	类型	默认值	说明
duration	Float	0.08	动画持续时间，单位为秒。
randomImage	Bool	true	是否从 images 中随机选择图片。
targetScale	Float	无	图片缩放比例；不设置时不缩放。
images	String[]	无	动画图片文件名数组。
startPosition	{ x?: Float, y?: Float }	{ x: 0, y: 0 }	图片移动起始位置。
endPosition	{ x?: Float, y?: Float }	{ x: 0, y: 0 }	图片移动结束位置。
randomPosition	{ x?: Float, y?: Float }	{ x: 0, y: 0 }	为起始位置和结束位置添加随机偏移范围。
useOpacity	Bool	false	是否启用透明度变化。
startOpacity	Float	1	起始透明度，仅 useOpacity 为 true 时生效。
endOpacity	Float	0.8	结束透明度，仅 useOpacity 为 true 时生效。
useRotation	Bool	false	是否启用旋转。
startAngle	Float	0	起始角度。
endAngle	Float	360	结束角度。
randomAngle	Float	0	旋转角度随机偏移范围。

完整示例

qButton:
  size:
    width: 112.5/1125
  backgroundStyle: alphabeticBackgroundStyle
  foregroundStyle:
    - qButtonForegroundStyle
    - qButtonUpForegroundStyle
  animation:
    - scaleAnimation
    - cartoonAnimation
    - physicsAnimation

scaleAnimation:
  animationType: scale
  isAutoReverse: true
  scale: 0.87
  pressDuration: 0.04
  releaseDuration: 0.08

cartoonAnimation:
  animationType: cartoon
  fps: 30
  images:
    - frame1.png
    - frame2.png

physicsAnimation:
  animationType: physics
  duration: 0.6
  images:
    - 01.png
    - 02.png
  startPosition: { x: 0, y: 0 }
  endPosition: { x: 0, y: -10 }