Class AnimationManager

constructor

• new AnimationManager(
      animationSettings?: AnimationManagerSettings,
  ): AnimationManager

  Parameters

  • OptionalanimationSettings: AnimationManagerSettings

  Returns AnimationManager

base

addFloatingElement

• addFloatingElement(
      element: HTMLElement,
      toElement: HTMLElement,
      animationSettings?: FloatingElementAnimationSettings,
  ): Promise<any>

  Add a floating element over another element.

  Parameters

  • element: HTMLElement
  • toElement: HTMLElement
  • OptionalanimationSettings: FloatingElementAnimationSettings

  Returns Promise<any>

animationsActive

• animationsActive(): boolean

  Indicates if animations should be run, based on constructor animationSettings.

  Returns boolean

displayBubble

• displayBubble(
      toElement: HTMLElement,
      message: string,
      animationSettings?: DisplayElementAnimationSettings,
  ): Promise<void>

  Add a floating text speach bubble over another element.

  Parameters

  • toElement: HTMLElement
  • message: string
  • OptionalanimationSettings: DisplayElementAnimationSettings

  Returns Promise<void>

displayMessage

• displayMessage(
      toElement: HTMLElement,
      message: string,
      color: string,
      animationSettings?: DisplayElementAnimationSettings,
  ): Promise<void>

  Add a floating message over another element.

  Parameters

  • toElement: HTMLElement
  • message: string
  • color: string
  • OptionalanimationSettings: DisplayElementAnimationSettings

  Returns Promise<void>

displayScoring

• displayScoring(
      toElement: HTMLElement,
      score: number,
      color: string,
      animationSettings?: DisplayElementAnimationSettings,
  ): Promise<void>

  Add a floating number over another element. It will be prefixed by '+' if positive, and '-' if negative.

  Parameters

  • toElement: HTMLElement
  • score: number
  • color: string
  • OptionalanimationSettings: DisplayElementAnimationSettings

  Returns Promise<void>

fadeIn

• fadeIn(
      element: HTMLElement,
      fromElement?: HTMLElement,
      animationSettings?: FloatingElementAnimationSettings,
  ): Promise<any>

  Fade an object in. The object must be attached to the destination before.

  Parameters

  • element: HTMLElement
  • OptionalfromElement: HTMLElement
  • OptionalanimationSettings: FloatingElementAnimationSettings

  Returns Promise<any>

fadeOutAndDestroy

• fadeOutAndDestroy(
      element: HTMLElement,
      toElement?: HTMLElement,
      animationSettings?: FloatingElementAnimationSettings,
  ): Promise<any>

  Fade out an object and destroy it. It call be called with a toElement, in that case a slide animation will be triggered.

  Parameters

  • element: HTMLElement
  • OptionaltoElement: HTMLElement
  • OptionalanimationSettings: FloatingElementAnimationSettings

  Returns Promise<any>

playInterval

• playInterval(
      animations: ((index: number) => Promise<any>)[],
      interval?: number,
  ): Promise<void>

  Play multiple animations with a fixed interval between each animation.

  Parameters

  • animations: ((index: number) => Promise<any>)[]

    functions generating an animation, returning a Promise.
  • interval: number = ...

  Returns Promise<void>

  promise when all animations ends

playParallel

• playParallel(animations: ((index: number) => Promise<any>)[]): Promise<any>

  Play multiple animations a the same time.

  Parameters

  • animations: ((index: number) => Promise<any>)[]

    functions generating an animation, returning a Promise.

  Returns Promise<any>

  promise when all animations ends

playSequentially

• playSequentially(animations: (() => Promise<any>)[]): Promise<any>

  Play multiple animations one after the other.

  Parameters

  • animations: (() => Promise<any>)[]

    functions generating an animation, returning a Promise.

  Returns Promise<any>

  promise when all animations ends

sequenceAnimationsAttach

• sequenceAnimationsAttach(
      element: HTMLElement,
      toElement: HTMLElement,
      animations: (
          (
              runningAnimation: RunningAnimation,
              animationSettings?: AnimationSettings,
          ) => Promise<RunningAnimation>
      )[],
      animationSettings?:
          | SequenceAnimationsSettings
          | SequenceAnimationsSettings[],
      insertBefore?: HTMLElement,
  ): Promise<any>

  Play a list of animations then attach to an element.

  Parameters

  • element: HTMLElement
  • toElement: HTMLElement
  • animations: (
        (
            runningAnimation: RunningAnimation,
            animationSettings?: AnimationSettings,
        ) => Promise<RunningAnimation>
    )[]
  • OptionalanimationSettings: SequenceAnimationsSettings | SequenceAnimationsSettings[]
  • OptionalinsertBefore: HTMLElement

  Returns Promise<any>

slideAndAttach

• slideAndAttach(
      element: HTMLElement,
      toElement: HTMLElement,
      animationSettings?: SlideAnimationSettings,
      insertBefore?: HTMLElement,
  ): Promise<any>

  Slide an object to an element.

  Parameters

  • element: HTMLElement
  • toElement: HTMLElement
  • OptionalanimationSettings: SlideAnimationSettings
  • OptionalinsertBefore: HTMLElement

  Returns Promise<any>

slideFloatingElement

• slideFloatingElement(
      element: HTMLElement,
      fromElement: HTMLElement,
      toElement: HTMLElement,
      animationSettings?: FloatingElementAnimationSettings,
  ): Promise<any>

  Add a floating element over another element.

  Parameters

  • element: HTMLElement
  • fromElement: HTMLElement
  • toElement: HTMLElement
  • OptionalanimationSettings: FloatingElementAnimationSettings

  Returns Promise<any>

slideIn

• slideIn(
      element: HTMLElement,
      fromElement?: HTMLElement,
      animationSettings?: FloatingElementAnimationSettings,
  ): Promise<any>

  Slide an object in. The object must be attached to the destination before.

  Parameters

  • element: HTMLElement
  • OptionalfromElement: HTMLElement
  • OptionalanimationSettings: FloatingElementAnimationSettings

  Returns Promise<any>

slideInFromDelta

• slideInFromDelta(
      element: HTMLElement,
      fromDelta: { x: number; y: number },
      animationSettings?: FloatingElementAnimationSettings,
  ): Promise<any>

  Slide an object in. The object must be attached to the destination before.

  Parameters

  • element: HTMLElement
  • fromDelta: { x: number; y: number }
  • OptionalanimationSettings: FloatingElementAnimationSettings

  Returns Promise<any>

slideOutAndDestroy

• slideOutAndDestroy(
      element: HTMLElement,
      toElement?: HTMLElement,
      animationSettings?: FloatingElementAnimationSettings,
  ): Promise<any>

  slide out an object and destroy it. It call be called with a toElement, in that case a slide animation will be triggered.

  Parameters

  • element: HTMLElement
  • OptionaltoElement: HTMLElement
  • OptionalanimationSettings: FloatingElementAnimationSettings

  Returns Promise<any>

slideToElementAndAttach

• slideToElementAndAttach(
      element: HTMLElement,
      overElement: HTMLElement,
      toElement: HTMLElement,
      animationSettings?:
          | SequenceAnimationsSettings
          | SequenceAnimationsSettings[],
      insertBefore?: HTMLElement,
  ): Promise<any>

  Slide an object over an intermediate element then attach to an element.

  Parameters

  • element: HTMLElement
  • overElement: HTMLElement
  • toElement: HTMLElement
  • OptionalanimationSettings: SequenceAnimationsSettings | SequenceAnimationsSettings[]
  • OptionalinsertBefore: HTMLElement

  Returns Promise<any>

slideToScreenCenterAndAttach

• slideToScreenCenterAndAttach(
      element: HTMLElement,
      toElement: HTMLElement,
      animationSettings?:
          | SequenceAnimationsSettings
          | SequenceAnimationsSettings[],
      insertBefore?: HTMLElement,
  ): Promise<any>

  Slide an object to the screen center then an element.

  Parameters

  • element: HTMLElement
  • toElement: HTMLElement
  • OptionalanimationSettings: SequenceAnimationsSettings | SequenceAnimationsSettings[]
  • OptionalinsertBefore: HTMLElement

  Returns Promise<any>

swap

• swap(
      elements: HTMLElement[],
      animationSettings?: SlideAnimationSettings,
  ): Promise<any>

  Swap two elements.

  Parameters

  • elements: HTMLElement[]
  • OptionalanimationSettings: SlideAnimationSettings

  Returns Promise<any>