跟踪路径

文档基于跟踪路径V2.0.4版本

组件说明

跟踪路径通常用于可视化应用动态装饰的实现，来增加画面细节，提升视觉效果。

效果案例

*跟踪路径效果案例

一、样式

在样式中可以设置组件的基本属性、全局样式、光效设置、状态和变形。

1、基本属性

位置尺寸

位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

跟踪路径组件尺寸小于实际尺寸时组件显示不完全，组件不做自适应展示。

*组件位置尺寸说明

默认隐藏

勾选之后在初始加载时组件默认隐藏且关闭回调触发，通常用来配合显隐控制，如【选项卡】组件进行显隐切换。

2、全局样式

内边距

由于路径的线条过粗以及发光效果的扩散区域过大，导致出现某些图形被裁切的现象，可设置内边距预留安全区域，防止裁切。

路径自定义

启用时可在运动路径写入SVG<path>标签写法绘制路径。

*启用路径自定义运动轨迹配置说明

<path>标签写法星形运动轨迹案例(启用路径自定义粘入运动轨迹即可)：

M65,1.12977573 L84.6526658,40.9504261 L128.597363,47.3359643 L96.7986813,78.3320179 L104.305332,122.099148 L65,101.435112 L25.6946684,122.099148 L33.2013187,78.3320179 L1.40263746,47.3359643 L45.3473342,40.9504261 L65,1.12977573 Z

<path>标签写法参照_1

<path>标签写法参照_2

禁用时可在运动路径上传SVG文件

SVG文件可在设计软件导出SVG格式

*禁用路径自定义运动轨迹配置说明

SVG文件上传星形运动轨迹案例(右键图片存储为，禁用路径自定义，导入SVG文件即可)：

如遇路径显示异常问题，请查看👉路径显示位置异常

轨迹缩放

调整跟踪路径以及路径动画的缩放。

显示路径

是否显示跟踪路径原路径。

*显示路径配置说明

发光

开启设置发光的颜色以及光强度

阴影

*路径阴影配置项说明

3、光效设置

速度曲线

组件预置五种跟踪路径动画速度类型，匀速、加速、减速、先加速后减速、先减速后加速。

*阴影配置项说明

反向

跟踪路径动画运动方向与场景需求相反时，可勾选反向。

速度

配置跟踪路径动画速度。

数值越大跟踪路路径动画速度越快，数值越小，则反之。

键盘上下键轻移或配置样式配置项过程当中出现跟踪路径动画异常时，刷新即可恢复。

长度

配置跟踪路径流光长度。

宽度

配置跟踪路径流光宽度。

阴影

*阴影配置项说明

4、动画

动画延时

组件加载完成到跟踪路径动画开始的时间间隔，单位为秒。

动画间隔

前一次跟踪路径动画结束与后一次跟踪路径动画开始之间的间隔，单位为秒。

启用循环时动画间隔配置失效。

循环

循环禁用时，跟踪路径动画默认前一次跟踪路径动画结束后开始后一次跟踪路径动画。

循环启用时，跟踪路径动画前一次跟踪路径动画结束前即开始后一次跟踪路径动画。

启用循环常用于闭合跟踪路径下使用。

*循环路径配置说明

二、数据

组件数据格式

*数据格式说明

JSON数据案例

[
]

数据配置项说明

*数据配置项说明

数据对接详情

数据对接详情请见以下文档👇

项目交付——数据对接入门

三、交互

载入动画

所有组件均提供移入、移入(小)、划变三种组件载入动画。

载入动画选择无时，则组件没有载入动画。

载入动画仅在可视化应用预览、发布组件加载时显示。

载入动画配置项：

*载入动画配置项说明

自定义事件

自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑；

详细的自定义事件教学👉自定义事件教学

欢迎您在评论区留下您对该组件的意见，管理员会及时回复您，如长时间未回复欢迎您搜索钉钉群：33782396或者扫描以下二维码添加微信群 @谨禧 说出您的想法，采纳后将送出定制礼品。

也可以通过问卷来向我们反馈需求：https://jinshuju.net/f/XyCXU0