Method startEffectAnimation

src/chart/helper/EffectSymbol.ts:77–119

(effectCfg: RippleEffectCfg)

    }

    startEffectAnimation(effectCfg: RippleEffectCfg) {
        const symbolType = effectCfg.symbolType;
        const color = effectCfg.color;
        const rippleNumber = effectCfg.rippleNumber;
        const rippleGroup = this.childAt(1) as Group;

        for (let i = 0; i < rippleNumber; i++) {
            // If width/height are set too small (e.g., set to 1) on ios10
            // and macOS Sierra, a circle stroke become a rect, no matter what
            // the scale is set. So we set width/height as 2. See #4136.
            const ripplePath = createSymbol(
                symbolType, -1, -1, 2, 2, color
            );
            ripplePath.attr({
                style: {
                    strokeNoScale: true
                },
                z2: 99,
                silent: true,
                scaleX: 0.5,
                scaleY: 0.5
            });

            const delay = -i / rippleNumber * effectCfg.period + effectCfg.effectOffset;
            ripplePath.animate('', true)
                .when(effectCfg.period, {
                    scaleX: effectCfg.rippleScale / 2,
                    scaleY: effectCfg.rippleScale / 2
                })
                .delay(delay)
                .start();
            ripplePath.animateStyle(true)
                .when(effectCfg.period, {
                    opacity: 0
                })
                .delay(delay)
                .start();

            rippleGroup.add(ripplePath);
        }

        updateRipplePath(rippleGroup, effectCfg);
    }

    /**
     * Update effect symbol