• Public
  • Public/Protected
  • All

A type of ping that produces a pulsing animation.

param origin

The canvas co-ordinates of the origin of the ping.

param [options]

Additional options to configure the ping animation.




  • new PulsePing(origin: any, __namedParameters?: { rings: number; color2: string }): PulsePing
  • Parameters

    • origin: any
    • __namedParameters: { rings: number; color2: string } = {}
      • rings: number
      • color2: string

    Returns PulsePing


_color2: number | utils.Color
_r: number
_r0: number
_timeSlice: number
_timeSlice2: number
_timeSlice15: number
_timeSlice25: number
_timeSlice45: number
filters: any[]
x: any
y: any
options: any
_color: number | utils.Color


  • animate(): Promise<boolean>
  • Start the ping animation.

    Returns Promise<boolean>

    Returns true if the animation ran to completion, false otherwise.

  • _animateFrame(dt: any, animation: any): void
  • On each tick, advance the animation.


    • dt: any

      The number of ms that elapsed since the previous frame.

    • animation: any

      The animation state.

    Returns void

  • destroy(options?: {}): void
  • Parameters

    • options: {} = {}

      Returns void

    • _drawShape(g: any, color: number, alpha: number, size: number): void
    • Draw the shape for this ping.


      • g: any

        The graphics object to draw to.

      • color: number

        The color of the shape.

      • alpha: number

        The alpha of the shape.

      • size: number

        The size of the shape to draw.

      Returns void

    • _computeTimeSlices(): void
    • Initialize some time slice variables that will be used to control the animation.

      The animation for each ring can be separated into two consecutive stages. Stage 1: Fade in a white ring with radius r0. Stage 2: Expand radius outward. While the radius is expanding outward, we have two additional, consecutive animations: Stage 2.1: Transition color from white to the configured color. Stage 2.2: Fade out. 1/5th of the animation time is allocated to Stage 1. 4/5ths are allocated to Stage 2. Of those 4/5ths, 2/5ths are allocated to Stage 2.1, and 2/5ths are allocated to Stage 2.2.

      Returns void

    • _colorTransition(from: typeof utils.Color, to: typeof utils.Color, duration: number, t: number): number
    • Transition linearly from one color to another.


      • from: typeof utils.Color

        The color to transition from.

      • to: typeof utils.Color

        The color to transition to.

      • duration: number

        The length of the transition in milliseconds.

      • t: number

        The current time along the duration.

      Returns number

      The incremental color between from and to.