Animation — SyncroMesh Documentation

Animations are defined as arrays of KeyFrame objects. Each keyframe specifies a time offset and one or more property targets. The engine interpolates between keyframes using the specified easing function. Animations can be attached to entity renderables or the camera.

KeyFrame #

KeyFrame

A single keyframe in an animation sequence.

time number — Time offset in seconds from animation start.
ease string optional — Easing function for interpolation to this keyframe. Defaults to "linear".
position Point optional — Target position offset { x, y }.
scale Point optional — Target scale { x, y }.
origin Point optional — Target origin/anchor point { x, y }.
rotation number optional — Target rotation in degrees.
colour Colour optional — Target tint colour { r, g, b, a } (0-255). color is accepted as an alias.
opacity number optional — Target local opacity from 0 to 1.
circleStart number optional — Target circle start angle in degrees for circle renderables.
shaderParams { v0: Vec4, v1: Vec4 } | [Vec4, Vec4] optional — Target custom shader parameter vectors.
looping boolean optional — If true, the animation loops indefinitely.
noise NoiseConfig optional — Noise-based procedural animation. See below.

Easing functions #

Value	Curve
`linear`	Linear (default)
`inQuad`	Ease in (quadratic)
`outQuad`	Ease out (quadratic)
`inOutQuad`	Ease in-out (quadratic)
`inCubic`	Ease in (cubic)
`outCubic`	Ease out (cubic)
`inOutCubic`	Ease in-out (cubic)
`inQuart`	Ease in (quartic)
`outQuart`	Ease out (quartic)
`inOutQuart`	Ease in-out (quartic)
`inQuint`	Ease in (quintic)
`outQuint`	Ease out (quintic)
`inOutQuint`	Ease in-out (quintic)

Noise #

Noise keyframes drive procedural animation using FastNoise. Instead of interpolating to a fixed target, the renderable or camera is displaced by a noise function over time.

NoiseConfig

Configuration for noise-driven animation.

type string optional — Noise algorithm. See table below.
seed number optional — Random seed.
timeScale Point optional — How fast the noise evolves over time { x, y }.
octaves number optional — Fractal octaves (for fractal types).
frequency number optional — Base frequency.
position Point optional — Amplitude of position displacement { x, y }.
scale Point optional — Amplitude of scale displacement { x, y }.
rotation number optional — Amplitude of rotation displacement (degrees).

Noise types #

Value	Algorithm
`value`	Value noise
`valueFractal`	Value fractal
`perlin`	Perlin noise
`perlinFractal`	Perlin fractal
`simplex`	Simplex noise
`simplexFractal`	Simplex fractal
`cellular`	Cellular (Worley) noise
`whiteNoise`	White noise
`cubic`	Cubic noise
`cubicFractal`	Cubic fractal

Usage #

Animations are added with Entity.addAnimation(id, renderableIdx, keyframes) or Camera.addAnimation(keyframes), then started with startAnimation and optionally monitored with onAnimationEnd.

import * as Entity from 'Syncromesh/Entity';

// Fade out over 0.5s with ease-out
const fadeAnim = await Entity.addAnimation(entityId, spriteIdx, [
    { time: 0,   colour: { r: 255, g: 255, b: 255, a: 255 } },
    { time: 0.5, colour: { r: 255, g: 255, b: 255, a: 0 }, ease: 'outQuad' }
]);
await Entity.startAnimation(entityId, spriteIdx, fadeAnim);

// Looping bob animation
const bob = await Entity.addAnimation(entityId, spriteIdx, [
    { time: 0,   position: { x: 0, y: 0 }, looping: true },
    { time: 0.5, position: { x: 0, y: -2 }, ease: 'inOutQuad' },
    { time: 1.0, position: { x: 0, y: 0 }, ease: 'inOutQuad' }
]);
await Entity.startAnimation(entityId, spriteIdx, bob);

← Render Descriptors Physics →