路径动画

在组件库中，我们给大家提供了丰富的组件，且为了降低大家在项目制作过程中的设计复杂度，对这些组件预设了一些样式，但我们仍可以在此基础上对其样式进行修改。

在组件的使用过程中，我们可以按照以下步骤进行设置：

1. 添加组件

如果您不太熟悉组件，可以通过组件窗口找到该组件后添加：

如果您比较熟悉组件，可以通过搜索来添加组件，这个方式会更便捷一些。
点击搜索按钮或按键盘“Ctrl+F”键打开搜索框，输入组件名称进行搜索，然后点击对应的组件进行添加。

2. 绑定数据

不同的组件适合于不同格式的数据，如果数据源格式不符合组件的要求，就无法正常显示内容。
路径动画属于特殊类型的组件，不需要绑定数据。

3. 设置组件样式

点击选中组件，在右侧“样式”设置窗口中可以看到多个不同的设置分类，每一个分类里都有不同的设置项，这些分类和设置项根据不同的组件会有不同的内容。

3.1 固定样式设置

所谓固定样式，就是设置完之后一直保持的组件样式，这是和 3.2 章节中的条件样式相对应的，条件样式就是根据数据的变化改变组件的样式。

下面我们按照每一个设置项给大家介绍一下具体的设置。

3.1.1 基本设置

配置项	说明
不透明度	1）根据个人喜好或整体和谐度合理地使用透明度，会让大屏布局更美观；	2）这个设置项的一个常见用法是结合条件样式/交互/多状态来实现组件的显示和隐藏。
鼠标穿透	开启后鼠标可以直接操作内部子组件或被该组件挡住的组件，但是编辑时当前组件只能通过左侧图层进行选中。

组件内边距	可以自定义设置组件的内边距，上下、左右边距的默认值都为“0px”。

路径动画 透明度变化，如下图所示：

路径动画 组件内边距变化，如下图所示：

3.1.2 路径设置

可以对路径动画的路径进行设置，比如路径的形状、颜色和宽度，如下图所示：

配置项	说明
路径形状	可以选择不同的路径形状，如“方形”“圆形”或者“自定义”，默认为“方形”。
路径颜色	对路径进行颜色配置。（颜色设置方式可以参看教程：设置颜色）
路径宽度	对路径的宽度进行设置，路径宽度默认值为“3px”。

路径动画** 路径形状变化**，如下图所示：

3.1.3 图形设置

对路径上运动的图形进行设置，比如图形的形状、尺寸、颜色和自动旋转。

配置项	说明
图形形状	可以选择不同的图形形状，如“圆形”“方形”“流光”和“自定义”，默认的图形形状为“流光”。
大小/尺寸	自定义对图形的大小/尺寸进行设置，圆形的默认大小为“10px”，方形的默认宽度为“30px”，默认高度为“5px”，流光的默认宽度为“7px”，默认高度为“60px”。
颜色	对图形进行颜色配置。（颜色设置方式可以参看教程：设置颜色）
自动旋转	当图形的大小/尺寸较大时，可以打开“自动旋转”，使图形能够沿着路径转弯。

路径动画更改图形形状，如下图所示：

路径动画 开启/关闭自动旋转，如下图所示：

3.1.4 展示设置

对路径动画的单次动画时长和是否循环播放进行设置，从而改变路径动画的播放效果，如下图所示：

配置项	说明
单次动画持续时长	自定义设置单次路径动画的时长，设置的时长越短，图形的运动速度越快，默认时长为“3 秒”。
循环播放动画	开启循环播放动画，图形会沿着路径一次次运动；关闭循环播放动画，在一次动画结束后就会停止。

3.1.5 大小＆位置

可以通过直接点击和拖动组件来调整大小和位置，也可以通过直接输入宽、高、X 坐标和Y 坐标来设置。

配置项	说明
组件大小	即组件的宽度和高度，单位为px。
组件位置	组件的 X、Y 轴坐标，X 坐标为组件左上角距离页面左边界的像素距离，Y 坐标为组件左上角距离页面上边界的像素距离。
组件旋转	三维空间旋转可以输入任意数值，数值对应角度向 X 轴/Y 轴旋转。

路径动画** 大小＆位置参数示意图**，如下图所示：

3.1.6 边框设置

开启“边框设置”按钮后，组件中才会显示边框样式，才可以对组件整体边框样式进行配置。

配置项	说明
边框颜色	对组件边框的颜色单独进行配置。
边框宽度	组件边框的粗细程度，默认宽度为“1px”。
圆角半径	边框形状，默认半径为“0px”。
边框样式	可选“实线”“虚线”“点状线”和“无边框”4 种边框样式。

路径动画 边框样式，如下图所示：

3.1.7 背景设置

组件默认没有背景颜色，如果需要设置背景颜色，需要先开启“背景设置”项按钮。

配置项	说明
背景颜色	对组件背景的颜色单独进行配置。
背景图/视频	可在此处添加本地图片或视频，充当组件背景。
填充方式	背景“拉伸填充”方式下，图片会根据目标区域的大小进行拉伸或压缩，以完全覆盖该区域；背景“平铺填充”方式下，会将图片按其原始大小和比例不变的方式铺满整个区域。
是否使用点九	开启此按钮后，进行点九编辑。
点九编辑	鼠标拖动蓝色像素边框进行编辑，指定可以进行拉伸的区域。
背景模糊	使背景变得模糊或虚化，默认模糊程度为“0px”。

路径动画 使用点九填充背景样式，如下图所示：

路径动画 平铺填充背景色样式，如下图所示：

3.2 条件样式设置

所谓条件样式，就是组件会根据数据条件变化的样式。（关于数据条件的设置请参看教程：数据条件）
几乎所有的设置项都可以进行条件样式的设置，但是不同的设置项在设置条件样式时稍有区别，具体有以下两种方式：

方式 1：在扩展设置菜单中设置

大部分的设置项的条件设置方式都属于这种，具体步骤如下：

以“基本设置”中的“不透明度”设置项为例：
点击选中组件，将鼠标移动到该设置项上，就可以看到设置项名称右侧会出现三个点（扩展设置按钮）。

点击这三个点，就可以打开扩展设置的窗口，第一个选项就是“条件样式”。
另外，将鼠标移动到设置项上使用鼠标右键点击，也可以打开扩展设置设置窗口。

点击“条件样式”打开条件样式设置的窗口。

点击“+添加条件样式”，然后选择需要触发的数据条件（这里可选的数据条件必须是已有的数据条件）。
根据当前设置项，我们可以设置满足条件 1 时的不透明度数值，以及当条件都不满足时的不透明度数值。

设置完成之后，这个设置项就会出现“已启用条件样式”的提示。

方式 2：直接在设置项中设置

有一些设置项的条件设置方式会直接显示在设置项中，可以直接进行设置，但基础路径图的条件样式只能通过方式 1 进行设置。

3.3 通过数据字段设置样式

所有设置项的修改本质都是值的修改，所以所有设置项都可以通过数据字段进行控制，这里需要用到动态数据字段功能。

仍然以“基本设置”中的“不透明度”设置为例：
打开扩展设置的窗口，点击第四个选项“生成数据字段”。

点击后，该设置项就会出现“请设置数据字段”的提示。

切换到“数据”设置界面，此时可以看到界面中新添加了一个“动态数据字段”的设置项，并且针对刚才选择的“不透明度”设置项生成了一个关联的字段。

接下来只需要添加一个数据字段到这里，就可以通过数据来控制不透明度了。
添加一个数值为“0”的数据到数据字段中，可以看到通过动态数据字段将不透明度的数值修改为“0”，从而使组件隐藏。

4. 设置组件交互

点击选中组件，在右侧“交互”设置窗口中可以对当前组件的交互进行添加和删除。

5. 二次开发

点击选中组件，在右侧“代码”设置窗口中可以对组件进行二次开发设置。

二次开发需要通过载入JavaScript 脚本文件来实现。
点击“+”添加设置项，多个脚本可以添加多个设置项。

在二开的过程中，我们可以对组件的样式进行控制。如果我们希望控制某个设置项，可以先在样式中查看该设置项的二开代码示例。

以“不透明度”设置项为例：
打开扩展设置的弹窗，点击“调用代码示例”。

可以看到这个设置项的二次开发调用代码示例。

这里我们举一个简单的二开示例（更详细的请参考二次开发教程）：
二开功能：组件自动在大屏上向右移动
示例代码：如下所示

/**
 * Extension.prototype.element;
 * Extension.prototype.enabled;
 * Extension.findExtensionsOfClass(className)
 * Element.prototype.setOption()
 * Element.prototype.getOption()
 * Element.prototype.getFullData()
 * Element.prototype.name
 */
class Button {
  update() {
    const position = this.element.getOption(["position"]);
    // 当前元素在X轴上移动一定的距离
    this.element.setOption(
      ["position"],
      [(position[0] + 1) % 100, position[1]]
    );
  }
}
export default Button;

点击“选择文件”，添加JavaScript 脚本文件，脚本启用后效果如下图所示：

6. 设置组件的多状态切换

多状态主要用于通过数据条件或是点击交互（通常是点击其他组件来触发本组件的状态切换）来切换组件设置项的场景，这里的设置项包括组件的样式、交互、数据和代码。

在以数据条件为触发条件时，条件样式和状态切换可以实现相同的效果。（例如数据变化后改变组件颜色）
在以鼠标操作为触发条件时，交互和状态切换可以实现相同的效果。（例如通过点击按钮切换组件的显示隐藏状态）
具体通过哪种方法没有固定的要求，大家可以自行选择。但是在不同的应用场景中，虽然最终都能实现相同的效果，但是设置便捷程度会有一些区别。