自定义 CSS 线条样式和动画

演示用于样式化被选中/选定线条的自定义 CSS 类，具有多个预定义样式和动画。

自定义 CSS 线条样式和动画

功能概述

此示例演示了如何使用自定义 CSS 类来样式化被选中/选定的线条。它提供了多个可以动态应用的预定义样式和动画。

核心特性实现

1. 基于 CSS 类的样式

使用 CSS 类应用样式：

<div className={`my-graph my-line-style-${lineStyle} my-line-animation-${lineAnimation}`}>
    <RelationGraph options={graphOptions} />
</div>

2. 样式选择 UI

提供用于选择线条样式的界面：

<SimpleUISelect
    data={[
        { value: '', text: 'Default' },
        { value: '1', text: 'Style 1' },
        { value: '2', text: 'Style 2' },
        { value: '3', text: 'Style 3' },
        { value: '4', text: 'Style 4' }
    ]}
    onChange={(newValue: string) => setLineStyle(newValue)}
    currentValue={lineStyle}
/>

3. 动画选择

从预定义的动画中选择：

<SimpleUISelect
    data={[
        { value: '', text: 'None' },
        { value: '1', text: 'Animation 1' },
        { value: '2', text: 'Animation 2' },
        { value: '3', text: 'Animation 3' },
        { value: '4', text: 'Animation 4' }
    ]}
    onChange={(newValue: string) => setLineAnimation(newValue)}
    currentValue={lineAnimation}
/>

4. CSS 动画定义

在 SCSS 中定义动画：

// 示例：流动动画
.my-line-animation-1 .rel-line-checked {
    stroke-dasharray: 10;
    animation: dash-flow 1s linear infinite;
}

@keyframes dash-flow {
    to {
        stroke-dashoffset: -20;
    }
}

// 示例：脉冲动画
.my-line-animation-2 .rel-line-checked {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; stroke-width: 3px; }
    50% { opacity: 0.5; stroke-width: 5px; }
}

5. 选中线条状态

设置初始选中的线条：

await graphInstance.setJsonData(myJsonData);
graphInstance.setCheckedLine('line-1');

创意使用场景

• 活动路线高亮：在导航中显示当前选定的路线
• 数据流动画：在系统图中动画显示活动数据路径
• 警报状态：为关键连接使用脉冲动画
• 进度指示：在流程图中显示流向
• 交互式原型：创建引人入胜的演示界面
• 状态监控：系统健康的视觉指示器