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 theoptions
of animate function. Additional properties:shocksNumber
(Optional): The number of shocks.shakeType
(Optional): The type of shake effect.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 isUPDATE_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);
},
]);