Appearance
动画模块使用说明
一、概述
动画模块为云搭平台提供了强大的组件动画能力，支持多种动画类型和配置方式，让您的大屏应用更加生动和吸引人。通过精心设计的动画效果，可以提升用户体验，增强视觉吸引力，并有效引导用户注意力。
功能特点
- 多种动画类型：支持缩放、透明度、移动、旋转、公转、SVG路径等6种动画类型
- 两种配置模式：简单模式和时间轴模式，满足不同复杂度的需求；时间轴模式支持多帧动画，精确控制每一帧的动画效果
- 循环播放支持：支持动画循环播放，可设置循环延迟和交替播放
- 事件系统集成：与事件系统深度集成，支持通过事件灵活控制动画
- SVG路径支持：支持从SVG文件提取路径或从画布中SVG组件选择路径，实现复杂运动轨迹
- 精确控制：支持启动、停止、暂停、恢复、还原等完整的动画控制功能
二、快速开始
动画配置流程
动画配置采用标准化的操作流程：
text
创建动画 → 配置动画 → 组件绑定动画 → 保存应用流程说明
| 步骤 | 主要内容 | 用户操作 |
|---|---|---|
| 创建动画 | 进入动画管理并新建动画配置 | 打开“动画编辑器”，点击“新增动画”按钮 |
| 动画配置 | 设置动画基本属性，选择动画模式和类型 | 配置简单模式或时间轴模式的具体参数 |
| 组件绑定动画 | 需要使用该动画的组件去绑定动画 | 在组件属性的“动画”标签中选择刚创建的动画 |
| 保存应用 | 保存并预览动画效果 | 点击确定返回画布，保存应用或进入预览 |
第一步：创建动画
目标：进入动画配置界面并新增一条动画配置
操作步骤
- 进入设计器：打开需要编辑的应用，保持在画布界面
- 打开动画编辑器：
- 在画布左侧工具栏点击 “动画”图标
- 现有动画列表：动画编辑器会列出当前页面的所有动画配置，方便统一管理和复用
- 点击新增动画：在动画编辑器中，点击 “新增动画”（+）按钮
- 打开配置对话框：系统会直接进入动画配置对话框，包含“基础配置”和“动画配置”两个折叠面板
提示：
- 动画编辑器与具体组件解耦，可以先集中创建动画，再分配给不同组件
第二步：配置动画
目标：完成动画的基础属性与动画效果设置
2.1 基础属性设置
- 展开基础配置面板：在动画配置对话框中，点击 "基础配置" 面板（默认已展开）
- 填写动画名称：
- 建议：输入能够准确描述效果的名称，如
淡入放大、呼吸灯 - 注意：动画名称为必填项
- 建议：输入能够准确描述效果的名称，如
- 设置延迟时间（可选）：
- 范围：0 - 10 秒，默认为 0
- 常用于创建串行动画
- 配置循环相关选项（可选）：
- 开启 "是否循环" 以实现无限循环
- 设置立即启动：
- 开启：组件加载后立即播放
- 关闭：通过事件触发播放
- 填写动画描述（可选）：记录动画用途或设计备注
2.2 选择动画模式
- 展开动画配置面板：点击对话框中的 "动画配置" 折叠项
- 选择模式：
| 模式 | 适用场景 |
|---|---|
| 简单模式 | 一步完成，不需要分时间段执行 |
| 时间轴模式 | 多阶段动效、串联组合 |
2.3 简单模式配置
- 启用所需动画类型：缩放、透明度、移动、旋转、公转、SVG路径
- 配置参数：
- 缩放：起始/结束比例（0-10）
- 透明度：起始/结束透明度（0-1）
- 移动：起始/结束 X、Y
- 旋转：起始/结束角度
- 公转：半径、中心点、路径分段、自转
- SVG路径：选择路径来源（上传SVG文件 或 画布中SVG组件）
2.4 时间轴模式配置
- 添加帧：点击“添加帧”，系统自动创建首帧（0-1 秒）
- 配置帧内容：在每个帧中启用并设置缩放、透明度、移动、旋转、公转
- 调整时间：
- 设置开始/结束时间，结束时间必须大于开始时间
- 新增帧：继续添加帧并配置不同的动效
- 设置循环：在最后一帧设置循环播放、交替、循环延迟
示例：三阶段动画
- 帧1（0-1s）：透明度 0 → 1
- 帧2（1-2s）：移动 X 0 → 200
- 帧3（2-3s）：旋转 0 → 360，并设置循环
第三步：组件绑定动画
目标：将已配置好的动画应用到一个或多个组件上
操作步骤
- 返回画布：关闭动画配置对话框，回到设计画布
- 选择组件：点击需要使用该动画的文件夹
- 进入动画标签：在右侧属性面板中切换到 “动画” 标签
- 选择动画：
- 在动画列表中点击 “选择已有动画”
- 从下拉列表中选择刚创建的动画
- 如需应用多个动画，可重复添加
- 确认绑定：点击“确定”或“应用”按钮，完成组件与动画的关联
提示：
- 同一个动画可以绑定到多个组件，方便批量复用
- 单个组件也可以绑定多个动画
第四步：保存并预览
预览效果
- 点击画布右上角的"保存"按钮，然后点击"预览"
三、基础配置
基础配置面板用于设置动画的基本属性：
动画名称
- 说明：为动画命名，便于识别和管理
- 要求：必填项，不能为空
- 用途：在动画列表中显示，用于区分不同的动画
延迟时间
- 说明：动画开始播放前的延迟时间
- 范围：0 - 10 秒
- 默认值：0 秒
- 单位：秒
- 应用场景：实现多个动画的先后播放效果
是否循环
- 说明：控制动画是否循环播放
- 类型：开关
- 默认值：关闭
立即启动
- 说明：组件加载后是否立即播放动画
- 类型：开关
- 默认值：开启
- 应用场景：
- 开启：组件加载后自动播放动画
- 关闭：需要通过事件触发才能播放动画
动画描述
- 说明：动画的详细描述信息（可选）
- 类型：多行文本
- 用途：记录动画的用途、效果说明等信息
四、动画模式
动画模块提供两种配置模式，满足不同复杂度的动画需求：
1. 简单模式
适用场景：单一动画效果，简单的进入、退出动画
特点：
- 配置简单直观
- 适合快速创建基础动画
- 所有动画效果同时执行
支持的动画类型：
- 缩放动画
- 透明度动画
- 移动动画
- 旋转动画
- 公转动画
- SVG路径动画
2. 时间轴模式
适用场景：复杂动画序列，多阶段动画效果
特点：
- 支持多帧动画配置
- 精确控制每一帧的时间范围
- 每帧可以独立配置动画效果
核心概念：
- 帧（Frame）：动画的一个时间片段
- 开始时间：该帧动画开始的时间点
- 结束时间：该帧动画结束的时间点
- 帧动画：在该帧时间范围内执行的动画效果
创建和管理帧
添加帧：
- 在时间轴模式配置区域，点击 "添加帧" 按钮
- 系统会自动创建新帧，开始时间继承上一帧的结束时间
- 新帧会自动成为当前选中帧
删除帧：
- 在帧标签页上，点击删除按钮（×）
- 系统会删除该帧
- 注意：至少需要保留一个帧
选择帧：
- 点击帧标签页即可选中该帧
- 选中后可以编辑该帧的配置
帧配置
每个帧包含以下配置项：
时间设置：
- 开始时间：该帧动画开始的时间点（秒）
- 结束时间：该帧动画结束的时间点（秒）
- 注意：结束时间必须大于开始时间，且不能超过总动画时长
动画效果：
每个帧可以独立配置以下动画类型：
- 缩放动画
- 透明度动画
- 移动动画
- 旋转动画
- 公转动画
注意：时间轴模式中，SVG路径动画仅在简单模式中支持，时间轴模式的帧中不支持SVG路径动画。
循环设置（仅最后一帧）：
在时间轴模式的最后一帧，可以设置：
- 循环播放：该帧结束后是否循环播放整个动画序列
- 是否交替：循环时是否反向播放
- 循环延迟：每次循环之间的延迟时间（毫秒）
注意：
- 只有最后一帧可以设置循环
- 如果基础配置中已开启循环，则帧的循环设置会被禁用
操作说明
- 点击"添加帧"按钮创建新的动画帧
- 在帧标签页中配置该帧的动画效果
- 设置帧的开始时间和结束时间
- 在最后一帧可以设置循环播放
五、动画类型详解
1. 缩放动画
功能：控制组件的缩放效果
配置项：
- 启用缩放动画：开关，控制是否启用
- 起始：动画开始时的缩放比例（0-10，1为原始大小）
- 结束：动画结束时的缩放比例（0-10，1为原始大小）
应用场景：
- 组件进入时的放大效果
- 组件退出时的缩小效果
- 呼吸灯效果（循环播放）
示例：
- 起始：0，结束：1 → 从无到有放大出现
- 起始：1，结束：1.2 → 放大1.2倍
- 起始：1.2，结束：1 → 从放大状态恢复
提示：
- 缩放动画性能开销较小，适合频繁使用
- 可以与其他动画（透明度、旋转）组合使用
2. 透明度动画
功能：控制组件的透明度变化
配置项：
- 启用透明度动画：开关，控制是否启用
- 起始：动画开始时的透明度（0-1，1为完全不透明）
- 结束：动画结束时的透明度（0-1，1为完全不透明）
应用场景：
- 淡入淡出效果
- 闪烁效果（循环播放）
- 渐隐渐显效果
示例：
- 起始：0，结束：1 → 淡入效果
- 起始：1，结束：0 → 淡出效果
- 起始：0.5，结束：1 → 从半透明到不透明
参数说明：
- 透明度范围：0-1
- 0 = 完全透明（不可见）
- 1 = 完全不透明（完全可见）
- 0.5 = 半透明（50%可见）
应用技巧：
- 淡入淡出是最常用的动画效果之一
- 可以与其他动画组合，如淡入+放大
- 适合用于组件显示/隐藏的过渡效果
3. 移动动画
功能：控制组件在画布上的位置移动
配置项：
- 启用移动动画：开关，控制是否启用
- 起始X：动画开始时组件在X轴的位置（像素）
- 结束X：动画结束时组件在X轴的位置（像素）
- 起始Y：动画开始时组件在Y轴的位置（像素）
- 结束Y：动画结束时组件在Y轴的位置（像素）
注意：
- 移动动画与公转动画、SVG路径动画互斥
- 启用移动动画时，其他位置相关动画会被自动禁用
应用场景：
- 组件从一侧滑入
- 组件上下浮动
- 组件左右移动
示例：
- 起始X：-200，结束X：0 → 从左侧滑入
- 起始Y：-100，结束Y：0 → 从上方滑入
- 起始X：0，结束X：100 → 向右移动
坐标系统说明：
- X轴：正值为向右，负值为向左
- Y轴：正值为向下，负值为向上
- 坐标原点：组件的当前位置
- 移动距离：相对于组件当前位置的偏移量
使用技巧：
- 滑入效果：起始位置在画布外，结束位置在目标位置
- 浮动效果：使用较小的移动距离（如±10px）配合循环播放
- 组合移动：可以同时设置X和Y实现斜向移动
4. 旋转动画
功能：控制组件的旋转效果
配置项：
- 启用旋转动画：开关，控制是否启用
- 起始角度：动画开始时的旋转角度（度）
- 结束角度：动画结束时的旋转角度（度）
应用场景：
- 加载图标旋转
- 组件旋转进入
- 持续旋转效果（循环播放）
示例：
- 起始角度：0，结束角度：360 → 旋转一圈
- 起始角度：-180，结束角度：0 → 从倒置状态旋转到正常状态
- 起始角度：0，结束角度：90 → 旋转90度
角度系统说明：
- 角度范围：无限制（可以超过360度）
- 正角度：顺时针旋转
- 负角度：逆时针旋转
- 360度 = 完整一圈
旋转中心：
- 默认旋转中心：组件的中心点
- 可以通过CSS transform-origin调整旋转中心
应用技巧：
- 持续旋转：设置360度并开启循环，实现持续旋转效果
- 摆动效果：使用小角度（如±15度）配合交替循环
- 进入旋转：从负角度旋转到0度，实现旋转进入效果
5. 公转动画
功能：组件围绕指定中心点进行圆周运动
配置项：
- 启用公转动画：开关，控制是否启用
- 公转半径：公转的半径大小（1-1000 像素）
- 路径分段：公转路径的分段数（60-720，越多越平滑）
- 中心X：公转中心点的X坐标（-1000 到 1000 像素）
- 中心Y：公转中心点的Y坐标（-1000 到 1000 像素）
- 公转时同步自转：开关，公转时是否同时自转
- 自转倍数：自转速度相对于公转的倍数（0-10）
注意：
- 公转动画与移动动画、SVG路径动画互斥
- 启用公转动画时，其他位置相关动画会被自动禁用
应用场景：
- 卫星围绕行星旋转
- 图标围绕中心点旋转
- 装饰元素公转效果
示例：
- 半径：100，中心：(0, 0) → 围绕组件当前位置旋转
- 半径：200，中心：(960, 540) → 围绕画布中心旋转
- 开启同步自转，倍数：2 → 公转1圈，自转2圈
参数详解：
公转半径：
- 范围：1-1000像素
- 半径越大，公转轨迹越大
- 建议根据组件大小和画布尺寸合理设置
路径分段：
- 范围：60-720
- 分段越多，轨迹越平滑，但性能开销也越大
- 建议值：60（粗糙）、180（中等）、360（平滑）、720（非常平滑）
中心点设置：
- 中心点相对于组件当前位置
- (0, 0) = 围绕组件自身旋转
- 正负值表示相对于组件位置的偏移
自转倍数：
- 范围：0-10
- 1 = 公转1圈，自转1圈（同步）
- 2 = 公转1圈，自转2圈（自转更快）
- 0 = 只公转不自转
应用技巧：
- 卫星效果：小图标围绕大图标公转
- 装饰效果：装饰元素围绕中心点旋转
- 组合效果：公转+自转+缩放，创建复杂动画
6. SVG路径动画
功能：组件沿着SVG路径移动，支持从SVG文件中提取路径或从画布中的SVG组件选择路径
配置项：
- 启用SVG路径动画：开关，控制是否启用
- 路径来源：选择路径的来源方式（上传SVG文件 或 画布中SVG组件）
- SVG路径：SVG路径字符串（d属性值），系统会自动提取
路径来源方式：
方式一：上传SVG文件
- 选择"上传SVG文件"选项
- 点击"选择SVG文件"按钮
- 选择包含
<path>元素的SVG文件 - 系统会自动解析文件并提取路径数据
- 可以在预览区域查看SVG效果
- 支持重新选择文件替换当前路径
方式二：从画布中SVG组件选择
- 选择"画布中SVG组件"选项
- 在下拉列表中选择画布上已有的SVG组件
- 系统会自动从该SVG组件中提取路径数据
- 可以在预览区域查看SVG效果
- 如果选中的SVG组件没有可用的路径数据，系统会提示错误
路径格式要求：
- SVG路径字符串必须以
M或m开头（表示移动命令） - 支持标准SVG路径命令：M、L、C、Q、Z等
- 系统会自动从SVG文件或SVG组件的
<path>元素的d属性中提取 - 如果SVG内容不包含
<path>元素，系统会提示错误
注意：
- SVG路径动画与移动动画、公转动画互斥
- 启用SVG路径动画时，其他位置相关动画会被自动禁用
- 如果移动动画或公转动画已启用，SVG路径动画开关会被禁用
- 上传的SVG文件或选择的SVG组件内容会保存用于预览
- 切换路径来源时，系统会保存当前来源的数据，方便后续切换回来
应用场景：
- 沿着曲线路径移动（如波浪线、弧线）
- 沿着复杂路径运动（如自定义轨迹）
- 实现非线性运动效果
- 创建路径跟随动画
- 复用画布中已有的SVG路径
示例路径：
M 0,0 L 100,100- 直线路径M 0,0 Q 50,50 100,0- 二次贝塞尔曲线M 0,0 C 0,50 100,50 100,0- 三次贝塞尔曲线
使用技巧：
- 如果画布中已有SVG组件，可以直接选择复用，无需重复上传
- 上传的SVG文件和选择的SVG组件数据会分别保存，切换来源时不会丢失
- 预览功能可以帮助您确认路径是否正确提取
六、动画控制
动画模块支持通过事件系统对动画进行精确控制，包括启动、停止、暂停、恢复和还原等操作。
1. 控制方式
动画控制可以通过以下方式实现：
- 自动启动：在基础配置中开启"立即启动"，组件加载后自动播放动画
- 事件触发：通过组件事件系统触发动画控制操作
- 编程控制：通过组件实例方法控制动画
2. 控制操作类型
| 操作类型 | 说明 | 适用场景 | 状态说明 |
|---|---|---|---|
| 启动动画 | 开始播放指定的动画或所有动画 | 点击按钮触发动画播放 | 创建新的动画实例 |
| 停止动画 | 停止动画播放，保留当前状态 | 需要立即停止动画 | 状态为"stopped"，只能还原，不能恢复 |
| 暂停动画 | 暂停动画播放，可以恢复 | 临时暂停动画 | 状态为"paused"，可以恢复继续播放 |
| 恢复动画 | 从暂停位置继续播放 | 恢复暂停的动画 | 只对"paused"状态的动画有效 |
| 还原动画 | 将组件还原到动画开始前的状态 | 重置组件状态 | 清除动画状态，恢复初始状态 |
重要说明：
停止 vs 暂停：
- 停止：动画被停止后，状态标记为"stopped"，此时只能使用"还原"操作将组件恢复到初始状态，不能使用"恢复"操作继续播放
- 暂停：动画被暂停后，状态标记为"paused"，此时可以使用"恢复"操作从暂停位置继续播放，也可以使用"还原"操作恢复到初始状态
恢复操作的限制：
- 恢复操作只对"paused"（暂停）状态的动画有效
- 对于"stopped"（停止）状态的动画，恢复操作不会生效
- 如果需要继续播放已停止的动画，需要重新启动动画
还原操作：
- 还原操作会清除动画状态，将组件恢复到动画开始前的初始状态
- 还原后，无论是"stopped"还是"paused"状态都会被清除
3. 事件配置
在事件配置中，可以选择以下动画控制操作：
- 启动动画：
startAnimation - 停止动画：
stopAnimation - 暂停动画：
pauseAnimation - 恢复动画：
resumeAnimation - 还原动画：
revertAnimation
4. 指定动画控制
如果组件有多个动画，可以通过指定动画ID来控制特定的动画：
- 在事件配置中选择动画控制操作
- 在参数中指定动画ID（动画名称）
- 系统会只控制指定的动画
如果不指定动画ID，则控制所有动画。
5. 使用示例
场景1：按钮点击启动动画
- 为按钮组件添加"点击"事件
- 选择"控制组件"操作
- 选择目标组件（需要播放动画的组件）
- 选择操作类型为"启动动画"
- 可选：指定动画ID（动画名称）
场景2：定时停止动画
- 为组件添加定时器事件
- 设置定时器间隔（如5秒）
- 选择"控制组件"操作
- 选择操作类型为"停止动画"
七、总结
动画模块为云搭平台提供了强大的动画能力，通过简单模式和时间轴模式，可以满足从简单到复杂的各种动画需求。合理使用动画效果，可以让您的大屏应用更加生动和专业。
关键要点：
- 选择合适的模式：简单动画用简单模式，复杂动画用时间轴模式
- 注意动画互斥：位置相关动画（移动、公转、SVG路径）不能同时启用
- 合理设置时长：根据动画效果合理设置时长，避免动画过快或过慢
- 优化性能：避免过度使用动画，注意性能影响，合理使用循环播放
- 事件集成：充分利用事件系统实现动画的灵活控制
- 理解停止和暂停：停止后只能还原，暂停后可以恢复，根据需求选择合适的控制方式
- SVG路径复用：如果画布中已有SVG组件，可以直接选择复用，无需重复上传文件
- 动画状态管理：系统会自动管理动画状态，支持精确控制每个动画的播放状态
祝您使用愉快！