通用属性、动画与批量操作
所有组件共有的基础属性、入场与强调动画、关键帧时间轴、位置与层级,以及多选后的对齐、编组、统一样式和存为模块。
概述
不论哪种组件,选中后右栏「组件」页签都有一组共同的设置:名称与显隐锁定、复制样式、动画、位置与尺寸、层级。选中多个组件时,同一个页签整页换成批量面板,用来对齐、等距、编组、统一样式和替换为模块。
功能入口
- 单选:画布上点选组件,或在左栏「图层」点选,右栏「组件」页签依次为「基础」「内容设置」「动画」「位置与尺寸」「层级操作」。「内容设置」的内容因组件类型而异,见组件总览。
- 多选:框选、按住
Ctrl / Cmd / Shift点选或Ctrl / Cmd + A全选,右栏显示「批量编辑 · N 个组件」。选中的是编组时显示「编组」。 - 工具栏在多选时出现「批量治理」下拉与对齐、等距按钮。
操作步骤
给一组组件做错峰入场
- 选中要入场的多个组件,在右栏「入场动画与尺寸」里选「入场动画(统一应用)」,例如「自下飞入」。
- 设置「时长(s)」「起始延迟(s)」,把「错峰步进(s)」设为大于 0,选区内的组件按顺序依次延迟入场。
做一个关键帧动画
- 选中组件,展开「动画」,在「关键帧时间轴」打开开关,需要循环则勾选「循环」。
- 点击「添加关键帧」,为每一帧设置「时间(ms)」「透明度」「位移X」「位移Y」「缩放」「旋转(°)」「缓动」。至少 2 个关键帧才会播放。
- 预览查看动画效果。
统一多个组件的样式
- 选中源组件,按
Ctrl / Cmd + Alt + C复制样式(只认单选),或在「基础」点击「复制样式」。 - 选中目标组件,按
Ctrl / Cmd + Alt + V,或点击「粘贴样式」。选中多个目标时,在批量面板「样式与模块」点击「粘贴样式到选区」。
颜色、字号、留白、入场动画跨组件通用,专属外观只对同类组件生效。
存为我的模块并复用
- 选中一个或多个组件,点击「存为模块」,存入「我的模块」。
- 在左栏「资源库」>「模块模板」>「我的模块」拖入复用。选中一片组件后,可用批量面板「样式与模块」的「替换为模块」整体替换,原位置删除当前选区并落入所选模块,可撤销。
属性/参数说明
基础
| 属性 | 说明 | 取值/默认值 |
|---|---|---|
| 可见 | 组件是否显示 | 显示/隐藏;隐藏的组件在工具栏「隐藏 N」按钮下以虚影显示 |
| 锁定 | 锁定后不能拖动与改尺寸 | 锁定/解锁 |
| 名称 | 组件名称,显示在图层里 | 文本 |
| 复制样式 / 粘贴样式 | 格式刷 | 按钮 |
| 存为模块 | 存为可复用的「我的模块」 | 上限 60 个,模块名称最长 40 字符,说明最长 160 字符 |
动画
动画在预览和运行页生效,设计态画布上不播放。
| 属性 | 说明 | 取值/默认值 |
|---|---|---|
| 入场动画 | 组件出现时的动画 | 默认(跟随全局)、无、淡入、自下飞入、自上飞入、自右飞入、自左飞入、缩放进入、翻转进入 |
| 时长(s) | 入场动画时长 | 0.2 到 10,步长 0.1 |
| 延迟(s) | 入场动画延迟,用于错峰 | 0 到 30,步长 0.1 |
| 强调动画 | 持续循环播放,营造氛围 | 无、脉冲缩放、呼吸、上下浮动、闪烁、光晕、旋转 |
| 循环时长(s) | 强调动画单次循环时长 | 数值 |
| 关键帧时间轴 | 逐帧变换动画 | 开关;「循环」;至少 2 帧生效 |
| 关键帧:时间(ms) | 相对时间轴起点 | 最小 0,步长 100 |
| 关键帧:透明度 | 不透明度 | 0 到 1 |
| 关键帧:位移X、位移Y | 相对组件原位的位移,单位 px | 数值 |
| 关键帧:缩放 | 缩放倍率,1 为原始大小 | 数值 |
| 关键帧:旋转(°) | 旋转角度 | 数值 |
| 关键帧:缓动 | 进入该帧所用缓动 | 匀速、缓动、缓入、缓出、缓入缓出 |
位置与尺寸、层级
| 属性 | 说明 | 取值/默认值 |
|---|---|---|
| X、Y、宽、高 | 组件位置与大小,画布上拖动和拉边即可,数字框用于精确对齐 | 数值 |
| 层级操作 | 调整叠放顺序 | 置于顶层、上移一层、下移一层、置于底层 |
批量面板
| 分节 | 内容 |
|---|---|
| 对齐 · 分布 · 层级 | 对齐:左对齐、水平居中、右对齐、顶对齐、垂直居中、底对齐、画布水平居中、画布垂直居中;等距:水平等距、垂直等距(选 3 个以上);统一尺寸:等宽、等高、等尺寸,以最后点选的组件为准;编组、取消编组;层级四个按钮 |
| 显隐与锁定 | 批量「组件可见」「锁定位置」,部分隐藏或锁定时显示提示 |
| 样式与模块 | 粘贴样式到选区、存为模块、替换为模块 |
| 入场动画与尺寸 | 入场动画(统一应用,可选「保持各自设置」)、时长(s)、起始延迟(s)、错峰步进(s)(0 到 5)、统一宽、统一高(0 表示选区内不一致,输入数值后回车统一应用,锁定组件不受影响) |
示例
四个指标卡依次入场:全选四个指标卡,「入场动画(统一应用)」选「自下飞入」,「时长(s)」填 0.6,「起始延迟(s)」填 0,「错峰步进(s)」填 0.15。预览时四张卡从下向上依次滑入,间隔 0.15 秒。
注意事项
注意:编组之后是一个整体,工具栏的对齐按钮不出现,需要先取消编组。双击组件或在图层里点子项,可单独编辑组内组件。
注意:删除组件不会自动删除指向它的联动,这类联动不会报错,只是永远不触发;用「自检」的「交互引用完整性」检查。
提示:整屏都在动会显得杂乱,强调动画只给少数关键组件;入场动画用延迟错开更有层次。