Open t-j-d opened 1 month ago
import { subStyleProps, Quadratic } from '@antv/g6'; import { Circle, Line } from '@antv/g';
export class FlyMarkerCubic extends Quadratic { getMarkerStyle(attributes) { return { r: 5, fill: '#c3d5f9', offsetPath: this.shapeMap.key, ...subStyleProps(attributes, 'marker') }; } getLineStyle(attributes) { return { stroke: '#c3d5f9', offsetPath: this.shapeMap.key, ...subStyleProps(attributes, 'marker') }; } onCreate() { const marker = this.upsert('marker', Circle, this.getMarkerStyle(this.attributes), this); marker?.animate([{ offsetDistance: 0 }, { offsetDistance: 1 }], { duration: 3000, iterations: Infinity, }); const line = this.upsert('line_style', Line, this.getLineStyle(this.attributes), this); line.animate([{ lineDashOffset: 20 }, { lineDashOffset: 0 }], { duration: 500, iterations: Infinity, }); } }
自定义的Circle生效了,line未生效
import { subStyleProps, Quadratic } from '@antv/g6'; import { Circle, Line } from '@antv/g';
export class FlyMarkerCubic extends Quadratic { getMarkerStyle(attributes) { return { r: 5, fill: '#c3d5f9', offsetPath: this.shapeMap.key, ...subStyleProps(attributes, 'marker') }; } getLineStyle(attributes) { return { stroke: '#c3d5f9', offsetPath: this.shapeMap.key, ...subStyleProps(attributes, 'marker') }; } onCreate() { const marker = this.upsert('marker', Circle, this.getMarkerStyle(this.attributes), this); marker?.animate([{ offsetDistance: 0 }, { offsetDistance: 1 }], { duration: 3000, iterations: Infinity, }); const line = this.upsert('line_style', Line, this.getLineStyle(this.attributes), this); line.animate([{ lineDashOffset: 20 }, { lineDashOffset: 0 }], { duration: 500, iterations: Infinity, }); } }