LogicFlow节点实现呼吸闪烁效果

LogicFlow是滴滴开源的流程图编辑框架，提供了一系列流程图编辑和交互功能。

我们这里主要实现某个节点呼吸闪烁效果。如下图蓝色的节点，我们假设当前节点是活动节点。

一、定义样式

我们借助animation属性实现动画效果。

.breathing-border {
  animation: breathing 2s infinite;
}

@keyframes breathing {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

二、加载样式

上面定义了样式之后，我们要做的就是将样式加载到我们的节点上。

因为我这里使用的矩形节点，所以这里继承RectNode实现自己的规则。

//自定义View
class RectRadiusView extends RectNode {
    getShape() {

        // 获取XxxNodeModel中定义的形状属性
        const {
            model
        }

        =this.props;

        const {
            x,
            y,
            width,
            height,
            radius,
            properties
        }

        =model;
        // 获取XxxNodeModel中定义的样式属性
        const style=model.getNodeStyle();
        const isActiveStep=properties.isActiveStep;

        return h('g', {}

        , [ h('rect', {
            ...style,
            x: x - width / 2,
            y: y - height / 2,
            width,
            height,
            rx: radius,
            ry: radius,
            className: isActiveStep ? 'breathing-border' : '',
        }),
    ]);
}
}

// 自定义model
class RectRadiusModel extends RectNodeModel {

    // 样式属性
    getNodeStyle() {
        const style=super.getNodeStyle() const {
            fill
        }

        =this.properties style.fill=fill style.strokeWidth=0 return style
    }

    // 形状属性
    initNodeData(data) {
        super.initNodeData(data) this.width=150 this.height=50 this.radius=25
    }
}

扩展完自己的节点后，注册上

lf.register({
    type: "rectRadiusNode",
    view: RectRadiusView,
    model: RectRadiusModel
})

至此，就实现了我们节点的一个呼吸闪烁的效果。