Skip to main content

Animation

Animation is a special API component in ElenixOS used to create and manage animation effects. This document describes the functionality, usage methods, and notes for the animation component.

Feature Introduction​

The animation component allows developers to create and manage various animation effects, such as position changes, size changes, transparency changes, etc. Through the animation component, developers can add vivid visual effects to applications, improving user experience.

Usage Methods​

Creating Animations​

Use the new lv.anim() constructor to create an animation object:

// Create animation object
const anim = new lv.anim();

Configuring Animations​

Use the following methods to configure animations:

// Set animation target object
anim.setVar(obj);

// Set animation value range
anim.setValues(startValue, endValue);

// Set animation duration (milliseconds)
anim.setDuration(1000);

// Set animation execution callback
anim.setExecCb((varObj, value) => {
    // Execute animation logic, such as setting position, size, etc.
    varObj.setX(value);
});

// Set animation completion callback
anim.setReadyCb(() => {
    eos.console.log("Animation completed");
});

// Set animation path (easing function)
anim.setPathCb(lv.anim_path_ease_in_out);

Starting Animations​

Use the start() method to start the animation:

// Start animation
anim.start();

Example: Creating a Translation Animation​

// Create an object
const obj = new lv.obj(eos.view.active());
obj.setSize(100, 100);
obj.setPos(50, 50);

// Create animation
const anim = new lv.anim();
anim.setVar(obj);
anim.setValues(50, 200);
anim.setDuration(1000);
anim.setExecCb((varObj, value) => {
    varObj.setX(value);
});
anim.setPathCb(lv.anim_path_ease_in_out);
anim.start();