new Timeline(options?) ​

• Since: 4.0.0
• Arguments:
  • {object} options. - Optional configuration object for the Timeline. (Optional: true)
  • {number} options.keyframes. - Specifies the number of keyframes for the animation. Defaults to 10. The larger the keyframes, the smoother the animation, but the more resource-intensive it is, as the loop to browse the array will take longer. (Optional: true)
• Example:

const timeline = new Timeline({ keyframes: 20 });

• Usage:

Creates a new instance of the Timeline class, which allows for complex animations and control over keyframes.

Add Animation in timeline ​

• Enum: Function

• Method: timeline.add(duration,cb?,transform?)
• Arguments:
  • {number} duration. (Optional: false)
  • { (obj?: number, time?: number) => TransformOptions[] } cb. (Optional: true)
  • { [property: string]: { to:number, from: number: easing?: Function } } transform. (Optional: true)
• Return: Timeline
• Usage:

Allows you to create complex animations more easily. For example, to display a movement with an Easing function

import { Timeline, Ease } from '@rpgjs/client'

new Timeline()
     .add(30, ({ scale }) => [{
         frameX: 0,
         frameY: 1,
         scale: [scale]
     }], {
         scale: {
             from: 0,
             to: 1,
             easing: Ease.easeOutBounce
         }
     })
     .add(100)
     .create()

Here we say

• Duration in frames, allowing you to specify the duration of each animation step. If the timeline respects a specific frame rate, e.g. 60 frames per second, 40 frames correspond to an animation duration of 2/3 of a second for each step.
• A function that will be called every 1 frame with the scale property defined in transform
• An object of transformation. Define the properties of your choice to be passed to the callback function
  • to: the starting value
  • from: the end value
  • easing: An easing function (By default, it is a linear function)

Note that if you just put a duration (add(100)), it will only put a pause on the animation

Easing functions available but you can create your own

function myEase(t: number, b: number, c: number, d: number): number { }

t: current time b: start value c: end value d: duration

Create the animation array ​

• Method: timeline.create()
• Return: FrameOptions[][] animation array
• Usage:

Allows you to create the animation array to assign to the animations property in the Spritesheet

import { Spritesheet, Timeline } from '@rpgjs/server'

@Spritesheet({
 id: 'sprite',
 image: require('./sprite.png'),
 width: 192,
 height: 228,
 framesHeight: 6,
 framesWidth: 6,
 anchor: [0.5],
 textures: {
     myanim: {
         animations: new Timeline()
                         .add(SEE THE ADD METHOD)
                         .create()    
     }   
 }
})
export class MyAnim {}