Articulated animations

Articulated animations are functions that use the canvas.animate function to create animations that can be applied to canvas components. These functions are typically used to create effects like shaking, bouncing, or other complex animations that involve multiple steps or components.

Shake

The shakeEffect function is an articulated animation that shakes a component. This function has the following parameters:

• alias: The alias to identify the component.
• options (Optional): Animation options, matching the options of animate function. Additional properties:
  • shocksNumber (Optional): The number of shocks.
  • shakeType (Optional): The type of shake effect. Possible values are vertical and horizontal.
  • maxShockSize (Optional): The maximum size of the shock.
• priority (Optional): The priority of the PixiJS ticker. This parameter sets the ticker's priority. The default is UPDATE_PRIORITY.NORMAL.

import { CANVAS_APP_GAME_LAYER_ALIAS, newLabel, shakeEffect, showImage } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        await showImage("bg", "bg", { scale: 1.3 });
        await showImage("alien", "alien", { align: 0.5 });
        shakeEffect("alien"); 
    },
    async () => {
        shakeEffect(CANVAS_APP_GAME_LAYER_ALIAS); 
    },
]);