Animations 动画系统

动画系统支持元素的各种动态效果，包括预设动画和自定义关键帧动画。

预设动画 (Animation)

interface Animation {
  type: AnimationType;       // 动画类型
  duration: number;          // 动画时长（秒）
  delay?: number;            // 延迟开始（秒）
  easing?: EasingFunction;   // 缓动函数
  loop?: boolean | number;   // 循环模式

  // 动画参数
  from?: any;                // 起始值
  to?: any;                  // 结束值
  direction?: string;        // 方向（部分动画）
}

type AnimationType =
  | 'fadeIn'     // 淡入
  | 'fadeOut'    // 淡出
  | 'move'       // 移动
  | 'scale'      // 缩放
  | 'rotate'     // 旋转
  | 'slideIn'    // 滑入
  | 'slideOut'   // 滑出
  | 'zoomIn'     // 放大进入
  | 'zoomOut';   // 缩小退出

淡入淡出

fadeIn 淡入

{
  "animations": [
    {
      "type": "fadeIn",
      "duration": 1,
      "easing": "easeOutCubic"
    }
  ]
}

fadeOut 淡出

{
  "animations": [
    {
      "type": "fadeOut",
      "duration": 0.5,
      "delay": 4.5
    }
  ]
}

组合使用：

{
  "animations": [
    { "type": "fadeIn", "duration": 1 },
    { "type": "fadeOut", "duration": 1, "delay": 4 }
  ]
}

滑动动画

slideIn 滑入

direction 值	描述
up	从下往上滑入
down	从上往下滑入
left	从右往左滑入
right	从左往右滑入

{
  "animations": [
    {
      "type": "slideIn",
      "direction": "up",
      "duration": 1,
      "easing": "easeOutCubic"
    }
  ]
}

缩放动画

scale 缩放

{
  "animations": [
    {
      "type": "scale",
      "from": 0.5,
      "to": 1.2,
      "duration": 2,
      "easing": "easeInOutCubic"
    }
  ]
}

循环缩放：

{
  "animations": [
    {
      "type": "scale",
      "from": 1,
      "to": 1.1,
      "duration": 3,
      "loop": true,
      "easing": "easeInOutSine"
    }
  ]
}

zoomIn / zoomOut

{
  "animations": [
    { "type": "zoomIn", "duration": 1.5, "easing": "easeOutBack" }
  ]
}

旋转动画

rotate 旋转

{
  "animations": [
    {
      "type": "rotate",
      "from": 0,
      "to": 360,
      "duration": 3,
      "loop": true,
      "easing": "linear"
    }
  ]
}

关键帧动画 (Keyframe)

关键帧动画提供更精细的控制，可以动画任意属性。

interface Keyframe {
  property: string;          // 属性名
  frames: KeyframeFrame[];   // 关键帧列表
}

可动画的属性

属性	描述	值类型
x	x 坐标	number
y	y 坐标	number
scale	缩放	number
rotation	旋转角度	number
opacity	透明度	number (0-1)
fill	填充色	string
fontSize	字体大小	number

示例

位置动画：

{
  "keyframes": [
    {
      "property": "x",
      "frames": [
        { "time": 0, "value": 0, "easing": "easeOutCubic" },
        { "time": 2, "value": 500 }
      ]
    }
  ]
}

颜色渐变：

{
  "keyframes": [
    {
      "property": "fill",
      "frames": [
        { "time": 0, "value": "#ff0000" },
        { "time": 1, "value": "#00ff00" },
        { "time": 2, "value": "#0000ff" }
      ]
    }
  ]
}

缓动函数

线性

linear - 匀速

正弦

easeInSine - 缓入（开始慢）
easeOutSine - 缓出（结束慢）
easeInOutSine - 缓入缓出

三次方

easeInCubic - 缓入
easeOutCubic - 缓出
easeInOutCubic - 缓入缓出

回弹

easeInBack - 回弹缓入
easeOutBack - 回弹缓出
easeInOutBack - 回弹缓入缓出

弹性

easeInElastic - 弹性缓入
easeOutElastic - 弹性缓出

弹跳

easeInBounce - 弹跳缓入
easeOutBounce - 弹跳缓出

循环动画

{
  "loop": false      // 不循环（默认）
}

{
  "loop": true       // 无限循环
}

{
  "loop": 3          // 循环3次
}

动画组合

淡入 + 滑入：

{
  "animations": [
    { "type": "fadeIn", "duration": 1 },
    { "type": "slideIn", "direction": "up", "duration": 1 }
  ]
}

放大 + 旋转：

{
  "animations": [
    { "type": "zoomIn", "duration": 1.5, "easing": "easeOutBack" },
    { "type": "rotate", "from": -180, "to": 0, "duration": 1.5 }
  ]
}

转场效果 (Transition)

interface Transition {
  type: 'fade' | 'slide' | 'zoom' | 'wipe';
  duration: number;
  direction?: 'left' | 'right' | 'up' | 'down';
  easing?: EasingFunction;
}

{
  "transition": {
    "type": "fade",
    "duration": 0.5,
    "easing": "easeInOutCubic"
  }
}

最佳实践

动画时长：淡入淡出建议 0.3-1 秒，复杂动画 1-2 秒
缓动选择：进入用 easeOut，退出用 easeIn，循环用 easeInOut
避免过度：不要同时使用太多动画
性能考虑：循环动画会增加渲染负担
时间协调：确保动画时长不超过 clip 的 duration

Animations 动画系统

On this page