Creating interactive scenarios
How to create different types of interactive scenarios.
Loop until on-click
async function createExplodingPigeon() { const dotLottie = new DotLottie();
await dotLottie .setAuthor('Sam') .setVersion('1.0') .addAnimation({ id: 'pigeon', url: 'https://lottie.host/071a2de9-52ca-4ce4-ba2f-a5befd220bdd/ECzVp4eaMa.json', }) .addStateMachine({ descriptor: { id: 'pigeon_fsm', initial: 0, // The index of the state to start at }, states: [ { name: "pigeon", type: "PlaybackState", mode: "Forward", speed: 1, use_frame_interpolation: true, autoplay: true, loop: true, marker: "bird" }, { name: "explosion", type: "PlaybackState", mode: "Forward", autoplay: true, speed: 0.5, loop: false, marker: 'explosion', }, { name: "feathers", type: "PlaybackState", autoplay: true, speed: 1, loop: false, marker: 'feathers', } ], transitions: [ { type: "Transition", from_state: 0, to_state: 1, on_pointer_down_event: {}, }, { type: "Transition", from_state: 1, to_state: 2, on_complete_event: {}, }, { type: "Transition", from_state: 2, to_state: 0, on_complete_event: {}, }, ], listeners: [ { type: "PointerDown" } ], context_variables: [ ] }) .build() .then((value) => { return value.toArrayBuffer(); }) .then((value) => { fs.writeFileSync('exploding_pigeon.lottie', Buffer.from(value)); });}
In this example we add our animation and then our state machine definition. Let’s look at the different parts of our state machine.
Descriptor
descriptor: { id: 'exploding_pigeon', initial: 0,}
Firstly we define a descriptor. The descriptor contains the id of this state machine as well as the index of the initial state.
States
Next we define our various states inside the states object
states: [ { name: "pigeon", animationId: "pigeon" type: "PlaybackState", mode: "Forward", speed: 1, use_frame_interpolation: true, autoplay: true, loop: true, marker: "bird" }, ...]
We define a 'pigeon'
state and include the optional 'animationId'
that we set to 'pigeon'
, the same animation id we declared when calling 'addAnimation'
.
Then we set the playback settings we want our animation to have when entering this state. You can find the detailed list of playback settings here.
Lastly we define our transitions:
transitions: [ { type: "Transition", from_state: 0, to_state: 1, on_pointer_down_event: {}, }, ...]
Transitions are events that need to happen for the state machine to enter another state. Here we use on_pointer_down_event
and define that we want to go from the state at index 0 to the state at index 1.
The full list of available transitions is visible here.
Creating a toggle button
Step 1 - Creating the dotLottie and adding an animation
const toggle = new DotLottie();
await toggle.addAnimation({ id: 'toggle', url: 'https://assets8.lottiefiles.com/private_files/lf30_tnblylie.json',})
Step 2 - Adding our state machine
const toggle = new DotLottie();
await toggle .addAnimation({ id: 'toggle', url: 'https://assets8.lottiefiles.com/private_files/lf30_tnblylie.json', }) .addStateMachine({ // Define the id of the state machine and the initial state descriptor: { id: 'state_toggle', initial: 0, }, states: [ { name: 'wait', type: 'PlaybackState', autoplay: false, loop: false, segment: [0, 1], }, { name: 'play_forward', type: 'PlaybackState', autoplay: true, loop: false, segment: [0, 30], }, { name: 'play_reverse', type: 'PlaybackState', autoplay: true, loop: false, mode: "Reverse", segment: [30, 0], }, ], transitions: [ { type: "Transition", from_state: 0, to_state: 1, on_pointer_down_event: {}, }, { type: "Transition", from_state: 1, to_state: 2, on_pointer_down_event: {}, }, { type: "Transition", from_state: 2, to_state: 1, on_pointer_down_event: {}, }, ], listeners: [ { type: 'PointerDown', }, ], context_variables: [], }) .build() .then((value) => { return value.toArrayBuffer(); }) .then((value) => { fs.writeFileSync('toggle.lottie', Buffer.from(value)); });
Step 3 - Building the dotLottie
const toggle = new DotLottie();
await toggle.addAnimation({ id: 'toggle', url: 'https://assets8.lottiefiles.com/private_files/lf30_tnblylie.json', }) .addStateMachine({ ... }) .build() .then((value) => { return value.toArrayBuffer(); }) .then(async (value) => { const filename = 'toggle.lottie';
console.log('> Writing to file: ', filename); fs.writeFileSync(filename, Buffer.from(value)); });
Creating a looping showcase of animations
In this example we add multiple animations to our .lottie and loop through them continously.
Step 1 - Create the dotLottie
const showcase = new DotLottie();
await showcase.addAnimation({ id: 'firstAnimation', url: 'https://lottie.host/7047918e-2ba5-4bf1-a552-3349f19ef789/Q1yB2lgufS.json',}).addAnimation({ id: 'secondAnimation', url: 'https://lottie.host/b658c6c9-77dc-4ecf-8519-43a3dc02a36e/tK4tGqJh2u.json'}).addAnimation({ id: 'thirdAnimation', url: 'https://lottie.host/e8c3091c-4f51-49b8-91e3-1086ca3b8d00/JWm1lQEuZW.json'})
Step 2 - Add the state machine
const showcase = new DotLottie();
await showcase.addAnimation({ id: 'firstAnimation', url: 'https://lottie.host/7047918e-2ba5-4bf1-a552-3349f19ef789/Q1yB2lgufS.json',}).addAnimation({ id: 'secondAnimation', url: 'https://lottie.host/b658c6c9-77dc-4ecf-8519-43a3dc02a36e/tK4tGqJh2u.json'}).addAnimation({ id: 'thirdAnimation', url: 'https://lottie.host/e8c3091c-4f51-49b8-91e3-1086ca3b8d00/JWm1lQEuZW.json'}).addStateMachine({ descriptor: { id: 'showcaseMachine', initial: 0 }, states: [ { name: "first_animation", type: "Playback", autoplay: true, loop: false, }, { name: "second_animation", type: "Playback", autoplay: true, loop: false, }, { name: "third_animation", type: "Playback", autoplay: true, loop: false, }, ], transitions: [ { from_state: 0, to_state: 1, on_complete: {}, }, { from_state: 1, to_state: 2, on_complete: {}, }, { from_state:2, to_state: 0, on_complete: {}, }, ], listeners: [], context_varibles: []})
Step 3 - Building the dotLottie
Building the dotLottie varies from platform to platform but this is how you would build with node:
const showcase = new DotLottie();
await showcase.addAnimation({ id: 'firstAnimation', url: 'https://lottie.host/7047918e-2ba5-4bf1-a552-3349f19ef789/Q1yB2lgufS.json', }) .addAnimation({ id: 'secondAnimation', url: 'https://lottie.host/b658c6c9-77dc-4ecf-8519-43a3dc02a36e/tK4tGqJh2u.json' }).addAnimation({ id: 'thirdAnimation', url: 'https://lottie.host/e8c3091c-4f51-49b8-91e3-1086ca3b8d00/JWm1lQEuZW.json' }).addStateMachine({ ... }) .build() .then((value) => { return value.toArrayBuffer(); }) .then(async (value) => { const filename = 'showcase.lottie';
console.log('> Writing to file: ', filename); fs.writeFileSync(filename, Buffer.from(value)); });