Animation

Animation

UI animation system with transitions, easings, chaining, and flip books.

Creation

Animations are declared on the Root, then referenced by elements.

use refaltor\ui\components\Animation;

$anim = Animation::create("@my_animation", Animation::TYPE_ALPHA);
$root->addAnimation($anim);

Animation names should start with @ by convention.

Factory Methods

Fade In / Out

$fadeIn = Animation::fadeIn("@fade_in", 0.5);   // duration in seconds
$fadeOut = Animation::fadeOut("@fade_out", 0.3);

Slide In

$slide = Animation::slideIn("@slide_left", [-200, 0], 0.4, Animation::EASING_OUT_BACK);
// slideIn(name, from_offset, duration, easing)

Pulse (Size)

$pulse = Animation::pulse("@pulse", [100, 30], [110, 34], 0.8);
// pulse(name, size_from, size_to, duration)

Animation Types

Constant	Value	Animates
TYPE_ALPHA	alpha	Transparency
TYPE_OFFSET	offset	Position [x, y]
TYPE_SIZE	size	Dimensions [w, h]
TYPE_COLOR	color	Color [r, g, b]
TYPE_CLIP	clip	Clip ratio (progress bars)
TYPE_UV	uv	UV coordinates
TYPE_FLIP_BOOK	flip_book	Sprite animation
TYPE_ASEPRITE_FLIP_BOOK	aseprite_flip_book	Aseprite import
TYPE_WAIT	wait	Pause (for chaining)

Properties

$anim->setAnimType(Animation::TYPE_OFFSET);
$anim->setDuration(1.0);           // Seconds
$anim->setFrom([0, -50]);          // Start value
$anim->setTo([0, 0]);              // End value
$anim->setEasing(Animation::EASING_OUT_BOUNCE);
$anim->setDelay(0.5);              // Delay before start
$anim->setReversible(true);        // Play in reverse after completion
$anim->setResettable(true);        // Can be reset
$anim->setActivated(true);         // Start immediately
$anim->setDestroyAtEnd(true);      // Remove element when done

Easing Functions

30+ easings available:

Category	Options
Linear	EASING_LINEAR
Quad	EASING_IN_QUAD, EASING_OUT_QUAD, EASING_IN_OUT_QUAD
Cubic	EASING_IN_CUBIC, EASING_OUT_CUBIC, EASING_IN_OUT_CUBIC
Quart	EASING_IN_QUART, EASING_OUT_QUART, EASING_IN_OUT_QUART
Quint	EASING_IN_QUINT, EASING_OUT_QUINT, EASING_IN_OUT_QUINT
Sine	EASING_IN_SINE, EASING_OUT_SINE, EASING_IN_OUT_SINE
Expo	EASING_IN_EXPO, EASING_OUT_EXPO, EASING_IN_OUT_EXPO
Circ	EASING_IN_CIRC, EASING_OUT_CIRC, EASING_IN_OUT_CIRC
Bounce	EASING_IN_BOUNCE, EASING_OUT_BOUNCE, EASING_IN_OUT_BOUNCE
Back	EASING_IN_BACK, EASING_OUT_BACK, EASING_IN_OUT_BACK
Elastic	EASING_IN_ELASTIC, EASING_OUT_ELASTIC, EASING_IN_OUT_ELASTIC
Spring	EASING_SPRING

Chaining Animations

Link animations together with setNext():

// Fade in -> Wait -> Fade out
$step1 = Animation::create("@chain_in", Animation::TYPE_ALPHA)
    ->setFrom(0.0)->setTo(1.0)->setDuration(0.5)
    ->setNext("@chain_wait");

$step2 = Animation::create("@chain_wait", Animation::TYPE_WAIT)
    ->setDuration(2.0)
    ->setNext("@chain_out");

$step3 = Animation::create("@chain_out", Animation::TYPE_ALPHA)
    ->setFrom(1.0)->setTo(0.0)->setDuration(0.5)
    ->setDestroyAtEnd(true);

$root->addAnimations([$step1, $step2, $step3]);

Events

$anim->setStartEvent("event_start");  // Trigger at start
$anim->setEndEvent("event_end");      // Trigger at end
$anim->setResetEvent("event_reset");  // Trigger on reset

Flip Book (Sprite Animation)

$flipbook = Animation::create("@sprite_anim", Animation::TYPE_FLIP_BOOK)
    ->setFps(10)
    ->setFrameCount(28)
    ->setFrameStep(8)
    ->setDuration(2.8);

Attaching to Elements

// Reference animation by name
$panel->addAnim("@fade_in");
$label->addAnims(["@slide_left", "@color_cycle"]);

Complete Example

$root = Root::create();

// Define animations
$root->addAnimation(Animation::fadeIn("@fade", 0.5));
$root->addAnimation(
    Animation::create("@bounce", Animation::TYPE_OFFSET)
        ->setFrom([0, -50])->setTo([0, 0])
        ->setDuration(0.6)->setEasing(Animation::EASING_OUT_BOUNCE)
);
$root->addAnimation(
    Animation::create("@color", Animation::TYPE_COLOR)
        ->setFrom([1, 0, 0])->setTo([0, 0, 1])
        ->setDuration(2.0)->setReversible(true)
);

// Use them
$panel = Panel::create("main")->addAnim("@fade");
$title = Label::create("t", "Hello")->addAnim("@bounce");
$colorText = Label::create("c", "Cycling")->addAnim("@color");

See Also

• Element — Where animations are referenced
• Root — Where animations are declared
• Binding — Animate bound properties