You can animate object property using the tween().
CDN: https://unpkg.com/@litecanvas/utils/dist/tween.js
Animate a object property over time.
Syntax:
tween(
object: any,
prop: string,
toValue: number,
duration?: number, // default: 1
easing?: (n: number) => number // default: LINEAR (see below)
): TweenController// basic example
// move the rect position x from 100 to 250 over 2 seconds
import litecanvas from "litecanvas"
import { tween } from "@litecanvas/utils"
let object
litecanvas()
function init() {
pos = {
x: 100,
y: H / 2,
}
// create the animation
const animation = tween(pos, "x", 250, 2)
// start the animation
animation.start()
// or just
// tween(...).start()
}
function draw() {
cls(0)
// draw the animated rect
rectfill(pos.x, pos.y, 50, 50, 3)
}Starts the animation.
Syntax: .start(engine?: LitecanvasInstance): this
// if your litecanvas has config.global = false
// you need to pass the engine instance to all animations
const engine = litecanvas({
global: false
})
function init () {
tween(...).start(engine)
}// otherwhise, just call `start()` without arguments
const engine = litecanvas({
// global: true // default value
})
function init () {
// just call start
tween(...).start()
}If enabled (flag = true) the tween we animate from a value to another relative value.
Syntax: .relative(flag?: boolean = true): this
const obj = { x: 0 }
// DEFAULT
// this tween animates the obj.x to 100
tween(obj, "x", 100)
// this tween animates the obj.x value to -100
tween(obj, "x", -100)
// RELATIVE
// this tween animates the obj.x increasing +100
tween(obj, "x", 100).relative()
// this tween animates the obj.x decreasing -100
tween(obj, "x", -100).relative()Make another tween start right after this tween ends.
Syntax: .relative(another: TweenController): this
const obj = { x: 0, angle: 0 }
const moveRight = tween(obj, "x", 100, 1).relative()
const moveLeft = tween(obj, "x", -100, 1).relative()
// move 100px to right, move 100px to left and rotate
moveRight.chain(moveLeft)
moveRight.start()Wait a amount of seconds before starts the animation.
Syntax: .delay(seconds: number): this
tween(...)
.delay(3)
.start() // wait 3 seconds before startsEnqueues a callback to be executed when the animation finishes.
Syntax: .onEnd(callback?: (object:any) => void): this
// lets imagine a animation
let anim = tween(...)
// print in console when that tween finishes
anim.onEnd(() => {
console.log('FINISHED')
})Stops and start again the animation.
Syntax: .restart(engine?: LitecanvasInstance, completed: boolean = false): this
Stops the animation.
Syntax: .stop(completed: boolean = true): this
// lets imagine a animation with 5 seconds of duration
let anim = tween(...)
// call `stop()` to interrumpt that animation
// and call all "onEnd" callbacks
anim.stop()
// or
// call `stop()` to interrumpt that animation
// and NOT call the "onEnd" callbacks
anim.stop(false)Stops the animation and remove all .onEnd() registered callbacks.
Syntax: .reset(): this
Returns the percentage of the animation's progress, a number between 0.0 and 1.0. Where 0 represents 0% and 1 represents 100%.
We provide few easing functions:
LINEAR(the default)EASE_INEASE_OUTEASE_IN_OUTELASTIC_INELASTIC_OUTELASTIC_IN_OUTBOUNCE_INBOUNCE_OUTBOUNCE_IN_OUTBACK_INBACK_OUTBACK_IN_OUT
You should use the tween()'s fifth argument to choose a easing function.
import litecanvas from "litecanvas"
import { tween, BOUNCE_OUT } from "@litecanvas/utils"
let object
litecanvas()
function init() {
pos = {
x: 100,
y: H / 2,
}
tween(pos, "x", 250, 2, BOUNCE_OUT).start()
}
function draw() {
cls(0)
rectfill(pos.x, pos.y, 50, 50, 3)
}