tween¶

Procedurally animate values over time, otherwise known as tweening

Tweening a value¶

function setup()
   p = vec2(0, HEIGHT/2)
   tween(p):to{x = WIDTH}:time(5)
end

function draw()
   background(40, 40, 50)

   style.strokeWidth(5)
   ellipse(p, 50)
end

class tween

static tween(target)¶

Create a new tween for a given target

Tweens are constructed using a fluent syntax via the to{} method

Each call to to{} will construct a tween segment, which can be customised (duration, easing function, callbacks, looping, etc…)

The tween can also be paused, resumed, restarted, cancelled and destroyed

Parameters:: target (table | usertype) – The target to tween

duration: number¶: The total duration of the tween in seconds

progress: number¶: The current progress of the tween in seconds

to(keyValuePairs)¶

Creates a new tweening segement, each key is animated to the corresponding value

Multiple tweening segments can be created one after another, but the same set of keys and values should be used for all of them

Parameters:: keyValuePairs (table) – The key value pairs to be tweened

time(duration)¶

Sets The duration of the current tweening segment (created via to{})

Parameters:: duration – The amount of time to take in seconds

ease(easeType)¶

Sets the easing type for the current tweening segment (created via to{})

Parameters:: easeType (constant) – The easing function to use

loop(count)¶

Sets the loop count for the current tweening segment (created via to{}). Using nil for the count will result in an infinite number of loops

Parameters:: count – The number of times to loop

pingpong(count)¶

Sets the current tweening segment (created via to{}) to ping-pong. Using nil for the count will result in an infinite number of ping-pongs

Parameters:: count – The number of times to ping-pong

relative()¶

Sets the current tweening segment (created via to{}) to be relative

Relative tweens will apply values additively from their initial state

unscaled()¶

Sets the current tweening segment (created via to{}) to used unscaled time

Unscaled tweens will not be effected by time.scale

onStep(callback)¶

Sets a callback for each time the tween is stepped (advanced once per frame)

Parameters:: callback (function) – The number of times to ping-pong

onStep(callback)

Sets a callback for each time the tween is stepped (advanced once per frame)

Parameters:: callback (function) – The callback function

onSeek(callback)¶

Sets a callback for each time the tween seeks

Parameters:: callback (function) – The callback function

onComplete(callback)¶

Sets a callback for each time the tween completes

Parameters:: callback (function) – The callback function

seek(percent)¶

Seeks the tween to a specific normalized time (percentage of duration)

Parameters:: percent (number) – The normalized time in the tween to seek to

pause()¶: Pauses the tween

play()¶: Plays/resumes the tween

restart()¶: Restarts the tween from the beginning

cancel()¶: Cancels and destroys the tween (this still counts as the tween completing)

dontDestroy()¶

Prevent the tween from being automatically destroyed when complete

This is useful if you plan to reuse the tween using restart()

Easing Functions¶

Here is a list of all easing functions

Easing Functions¶
Name
`backIn`
`backOut`
`backInOut`
`bounceIn`
`bounceOut`
`bounceInOut`
`circularIn`
`circularOut`
`circularInOut`
`cubicIn`
`cubicOut`
`cubicInOut`
`quarticIn`
`quarticOut`
`quarticInOut`
`quinticIn`
`quinticOut`
`quinticInOut`
`sinusoidalIn`
`sinusoidalOut`
`sinusoidalInOut`
`elasticIn`
`elasticOut`
`elasticInOut`
`punch`