动画组件

动画组件用于创建各种动画效果和过渡动画。

Transition - 过渡动画

用于创建平滑的过渡效果。

基本用法

Transition() {
  // 过渡内容
}

属性列表

属性	接受类型	默认值	说明
visible	bool	true	是否显示
type	string	"fade"	动画类型
duration	int	300	动画时长(毫秒)
delay	int	0	延迟时间(毫秒)
easing	string	"ease"	缓动函数
onEnter	func	null	进入事件
onExit	func	null	退出事件
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"transparent"	背景颜色

动画类型

值	说明
"fade"	淡入淡出
"slide"	滑动
"zoom"	缩放
"rotate"	旋转
"bounce"	弹跳

缓动函数

值	说明
"ease"	缓动
"ease-in"	缓入
"ease-out"	缓出
"ease-in-out"	缓入缓出
"linear"	线性

示例

// 淡入淡出过渡
Transition()
  .visible(true)
  .type("fade")
  .duration(500)
  .easing("ease-in-out")

// 滑动过渡
Transition()
  .visible(true)
  .type("slide")
  .duration(300)
  .delay(100)
  .onEnter(() => {
    // 进入动画开始
  })

Fade - 淡入淡出

用于创建淡入淡出效果。

基本用法

Fade() {
  // 淡入淡出内容
}

属性列表

属性	接受类型	默认值	说明
visible	bool	true	是否显示
direction	string	"in"	方向
duration	int	300	动画时长(毫秒)
delay	int	0	延迟时间(毫秒)
easing	string	"ease"	缓动函数
onComplete	func	null	完成事件
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"transparent"	背景颜色

方向值

值	说明
"in"	淡入
"out"	淡出

示例

// 淡入效果
Fade()
  .visible(true)
  .direction("in")
  .duration(500)

// 淡出效果
Fade()
  .visible(false)
  .direction("out")
  .duration(300)
  .onComplete(() => {
    // 淡出完成
  })

Slide - 滑动动画

用于创建滑动效果。

基本用法

Slide() {
  // 滑动内容
}

属性列表

属性	接受类型	默认值	说明
visible	bool	true	是否显示
direction	string	"right"	滑动方向
distance	string, int, singlef	"100%"	滑动距离
duration	int	300	动画时长(毫秒)
delay	int	0	延迟时间(毫秒)
easing	string	"ease"	缓动函数
onComplete	func	null	完成事件
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"transparent"	背景颜色

方向值

值	说明
"left"	从左
"right"	从右
"up"	从上
"down"	从下

示例

// 从右侧滑入
Slide()
  .visible(true)
  .direction("right")
  .distance("100%")
  .duration(400)

// 从下方滑出
Slide()
  .visible(false)
  .direction("down")
  .distance("50px")
  .duration(300)
  .easing("ease-out")

Zoom - 缩放动画

用于创建缩放效果。

基本用法

Zoom() {
  // 缩放内容
}

属性列表

属性	接受类型	默认值	说明
visible	bool	true	是否显示
scale	string, int, singlef	1	缩放比例
origin	string	"center"	缩放原点
duration	int	300	动画时长(毫秒)
delay	int	0	延迟时间(毫秒)
easing	string	"ease"	缓动函数
onComplete	func	null	完成事件
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"transparent"	背景颜色

原点值

值	说明
"center"	中心
"top"	顶部
"bottom"	底部
"left"	左侧
"right"	右侧

示例

// 放大效果
Zoom()
  .visible(true)
  .scale(1.2)
  .origin("center")
  .duration(500)

// 缩小效果
Zoom()
  .visible(false)
  .scale(0.8)
  .origin("top")
  .duration(300)
  .easing("ease-in")

Rotate - 旋转动画

用于创建旋转效果。

基本用法

Rotate() {
  // 旋转内容
}

属性列表

属性	接受类型	默认值	说明
visible	bool	true	是否显示
angle	int, singlef	0	旋转角度
direction	string	"clockwise"	旋转方向
duration	int	300	动画时长(毫秒)
delay	int	0	延迟时间(毫秒)
easing	string	"ease"	缓动函数
onComplete	func	null	完成事件
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"transparent"	背景颜色

方向值

值	说明
"clockwise"	顺时针
"counterclockwise"	逆时针

示例

// 顺时针旋转
Rotate()
  .visible(true)
  .angle(360)
  .direction("clockwise")
  .duration(1000)

// 逆时针旋转
Rotate()
  .visible(false)
  .angle(180)
  .direction("counterclockwise")
  .duration(500)
  .easing("ease-in-out")

Bounce - 弹跳动画

用于创建弹跳效果。

基本用法

Bounce() {
  // 弹跳内容
}

属性列表

属性	接受类型	默认值	说明
visible	bool	true	是否显示
intensity	string, int, singlef	1	弹跳强度
duration	int	600	动画时长(毫秒)
delay	int	0	延迟时间(毫秒)
easing	string	"ease"	缓动函数
onComplete	func	null	完成事件
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"transparent"	背景颜色

示例

// 弹跳效果
Bounce()
  .visible(true)
  .intensity(1.2)
  .duration(800)

// 轻微弹跳
Bounce()
  .visible(false)
  .intensity(0.8)
  .duration(400)
  .easing("ease-out")

Shake - 震动动画

用于创建震动效果。

基本用法

Shake() {
  // 震动内容
}

属性列表

属性	接受类型	默认值	说明
visible	bool	true	是否显示
intensity	string, int, singlef	10	震动强度
duration	int	500	动画时长(毫秒)
delay	int	0	延迟时间(毫秒)
easing	string	"ease"	缓动函数
onComplete	func	null	完成事件
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"transparent"	背景颜色

示例

// 震动效果
Shake()
  .visible(true)
  .intensity(15)
  .duration(600)

// 轻微震动
Shake()
  .visible(false)
  .intensity(5)
  .duration(300)
  .easing("ease-in-out")

Pulse - 脉冲动画

用于创建脉冲效果。

基本用法

Pulse() {
  // 脉冲内容
}

属性列表

属性	接受类型	默认值	说明
visible	bool	true	是否显示
scale	string, int, singlef	1.1	脉冲缩放
duration	int	1000	动画时长(毫秒)
delay	int	0	延迟时间(毫秒)
easing	string	"ease"	缓动函数
onComplete	func	null	完成事件
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"transparent"	背景颜色

示例

// 脉冲效果
Pulse()
  .visible(true)
  .scale(1.2)
  .duration(1500)

// 快速脉冲
Pulse()
  .visible(false)
  .scale(1.05)
  .duration(500)
  .easing("ease-in-out")

Glow - 发光动画

用于创建发光效果。

基本用法

Glow() {
  // 发光内容
}

属性列表

属性	接受类型	默认值	说明
visible	bool	true	是否显示
color	string	"#1890ff"	发光颜色
intensity	string, int, singlef	1	发光强度
duration	int	2000	动画时长(毫秒)
delay	int	0	延迟时间(毫秒)
easing	string	"ease"	缓动函数
onComplete	func	null	完成事件
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"transparent"	背景颜色

示例

// 发光效果
Glow()
  .visible(true)
  .color("#52c41a")
  .intensity(1.5)
  .duration(3000)

// 蓝色发光
Glow()
  .visible(false)
  .color("#1890ff")
  .intensity(1.2)
  .duration(2000)
  .easing("ease-in-out")

Wave - 波浪动画

用于创建波浪效果。

基本用法

Wave() {
  // 波浪内容
}

属性列表

属性	接受类型	默认值	说明
visible	bool	true	是否显示
amplitude	string, int, singlef	20	波浪幅度
frequency	string, int, singlef	1	波浪频率
duration	int	2000	动画时长(毫秒)
delay	int	0	延迟时间(毫秒)
easing	string	"ease"	缓动函数
onComplete	func	null	完成事件
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"transparent"	背景颜色

示例

// 波浪效果
Wave()
  .visible(true)
  .amplitude(30)
  .frequency(1.5)
  .duration(3000)

// 快速波浪
Wave()
  .visible(false)
  .amplitude(15)
  .frequency(2)
  .duration(1500)
  .easing("ease-in-out")

Loading - 加载动画

用于创建加载动画效果。

基本用法

Loading() {
  // 加载内容
}

属性列表

属性	接受类型	默认值	说明
visible	bool	true	是否显示
type	string	"spinner"	动画类型
size	string, int, singlef	32	尺寸
color	string	"#1890ff"	颜色
duration	int	1000	动画时长(毫秒)
delay	int	0	延迟时间(毫秒)
easing	string	"ease"	缓动函数
onComplete	func	null	完成事件
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"transparent"	背景颜色

动画类型

值	说明
"spinner"	旋转器
"dots"	点状
"bars"	条形
"pulse"	脉冲

示例

// 旋转器加载
Loading()
  .visible(true)
  .type("spinner")
  .size(40)
  .color("#52c41a")

// 点状加载
Loading()
  .visible(false)
  .type("dots")
  .size(24)
  .duration(1500)

Progress - 进度动画

用于创建进度条动画效果。

基本用法

Progress() {
  // 进度内容
}

属性列表

属性	接受类型	默认值	说明
visible	bool	true	是否显示
percent	int, singlef	0	进度百分比
type	string	"line"	进度条类型
color	string	"#1890ff"	进度条颜色
duration	int	1000	动画时长(毫秒)
delay	int	0	延迟时间(毫秒)
easing	string	"ease"	缓动函数
onComplete	func	null	完成事件
width	string, int, singlef	"100%"	宽度
height	string, int, singlef	8	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"#f0f0f0"	背景颜色
borderRadius	string, int, singlef	4	圆角

类型值

值	说明
"line"	线性
"circle"	圆形
"dashboard"	仪表盘

示例

// 线性进度条
Progress()
  .visible(true)
  .percent(75)
  .type("line")
  .color("#52c41a")
  .duration(2000)

// 圆形进度条
Progress()
  .visible(false)
  .percent(60)
  .type("circle")
  .color("#1890ff")
  .duration(1500)
  .easing("ease-out")

Scale - 缩放动画

用于创建缩放效果。

基本用法

Scale() {
  // 缩放内容
}

属性列表

属性	接受类型	默认值	说明
visible	bool	true	是否显示
scale	string, int, singlef	1	缩放比例
origin	string	"center"	缩放原点
duration	int	300	动画时长(毫秒)
delay	int	0	延迟时间(毫秒)
easing	string	"ease"	缓动函数
onComplete	func	null	完成事件
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"transparent"	背景颜色

示例

// 放大效果
Scale()
  .visible(true)
  .scale(1.2)
  .origin("center")
  .duration(500)

// 缩小效果
Scale()
  .visible(false)
  .scale(0.8)
  .origin("top")
  .duration(300)
  .easing("ease-in")

Animate - 通用动画组件

用于创建通用动画效果。

基本用法

Animate() {
  // 动画内容
}

属性列表

属性	接受类型	默认值	说明
visible	bool	true	是否显示
animation	string	""	动画名称
duration	int	300	动画时长(毫秒)
delay	int	0	延迟时间(毫秒)
easing	string	"ease"	缓动函数
iterationCount	int	1	动画次数
direction	string	"normal"	动画方向
fillMode	string	"none"	填充模式
onComplete	func	null	完成事件
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"transparent"	背景颜色

动画方向

值	说明
"normal"	正常
"reverse"	反向
"alternate"	交替
"alternate-reverse"	交替反向

填充模式

值	说明
"none"	无
"forwards"	保持结束状态
"backwards"	保持开始状态
"both"	保持两端状态

示例

// 自定义动画
Animate()
  .visible(true)
  .animation("customBounce")
  .duration(1000)
  .iterationCount(3)
  .direction("alternate")

// 无限循环动画
Animate()
  .visible(false)
  .animation("pulse")
  .duration(2000)
  .iterationCount(-1)
  .easing("ease-in-out")

Keyframe - 关键帧动画

用于创建关键帧动画效果。

基本用法

Keyframe() {
  // 关键帧动画内容
}

属性列表

属性	接受类型	默认值	说明
visible	bool	true	是否显示
keyframes	arr	[]	关键帧数组
duration	int	1000	动画时长(毫秒)
delay	int	0	延迟时间(毫秒)
easing	string	"ease"	缓动函数
iterationCount	int	1	动画次数
direction	string	"normal"	动画方向
fillMode	string	"none"	填充模式
onComplete	func	null	完成事件
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"transparent"	背景颜色

示例

// 关键帧动画
Keyframe()
  .visible(true)
  .keyframes([
    { offset: 0, transform: "translateX(0px)", opacity: 1 },
    { offset: 0.5, transform: "translateX(100px)", opacity: 0.5 },
    { offset: 1, transform: "translateX(200px)", opacity: 0 }
  ])
  .duration(2000)
  .easing("ease-in-out")

// 复杂关键帧动画
Keyframe()
  .visible(false)
  .keyframes([
    { offset: 0, transform: "scale(1) rotate(0deg)" },
    { offset: 0.5, transform: "scale(1.2) rotate(180deg)" },
    { offset: 1, transform: "scale(1) rotate(360deg)" }
  ])
  .duration(3000)
  .iterationCount(2)

Spring - 弹性动画

用于创建弹性动画效果。

基本用法

Spring() {
  // 弹性动画内容
}

属性列表

属性	接受类型	默认值	说明
visible	bool	true	是否显示
tension	int, singlef	300	张力
friction	int, singlef	30	摩擦力
mass	int, singlef	1	质量
precision	int, singlef	0.01	精度
duration	int	1000	动画时长(毫秒)
delay	int	0	延迟时间(毫秒)
onComplete	func	null	完成事件
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"transparent"	背景颜色

示例

// 弹性动画
Spring()
  .visible(true)
  .tension(400)
  .friction(25)
  .mass(1.2)
  .duration(1500)

// 高弹性动画
Spring()
  .visible(false)
  .tension(500)
  .friction(20)
  .mass(0.8)
  .precision(0.005)
  .duration(2000)
  .onComplete(() => {
    // 弹性动画完成
  })