搜索到
1
篇与
的结果
-
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 })至此，就实现了我们节点的一个呼吸闪烁的效果。
