Animation
Reference Animating values and objects using tweens
Guides
Animating Values top ↑
A tween changes a value over time. Use one to slide a menu into place, fade a label, or move an object to a destination.
Starting a tween
Keep the values in a table or object, then give the tween its destination and duration. An easing curve changes how it speeds up or slows down.
Start a tween once, such as when a button is pressed. Starting it again in draw() would reset it every frame. Keep the returned tween if you want to pause or cancel it later.
Use a completion callback to run code when it finishes, or a sequence to run several tweens in order. See Tweening for examples and commands.
Tweening
Animating with Tweens top ↑
A tween changes values over time. Use it to move an object, fade a color, or animate a menu.
Tweening a value
function setup()
p = vec2(0, HEIGHT/2)
tween(p):to{x = WIDTH}:time(5)
end
function draw()
background(40, 40, 50)
strokeWidth(5)
ellipse(p, 50)
endtween(target)
Syntax
tween(target)Create a tween for a table or object. Call to{} with the values you want to reach, then chain commands to set the duration, easing, or looping.
Each to{} adds a new part to the animation. Keep the tween to pause, resume, restart, or cancel it.
Parameters
| target | table | usertype. The target to tween |
Returns
tween |
tween.duration
Syntax
tween.durationThe total duration of the tween in seconds
tween.progress
Syntax
tween.progressThe current progress of the tween in seconds
tween.target
Syntax
tween.targetThe target object being tweened
tween:to(keyValuePairs)
Syntax
tween: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 |
tween:time(duration)
Syntax
tween:time(duration)Sets The duration of the current tweening segment (created via to{})
Parameters
| duration | number. The amount of time to take in seconds |
tween:ease(easeType)
Syntax
tween:ease(easeType)Sets the easing type for the current tweening segment (created via to{})
Parameters
| easeType | constant. The easing function to use |
tween:loop(count)
Syntax
tween: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 | integer. The number of times to loop |
tween:pingpong(count)
Syntax
tween: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 | integer. The number of times to ping-pong |
tween:relative()
Syntax
tween:relative()Sets the current tweening segment (created via to{}) to be relative
Relative tweens will apply values additively from their initial state
tween:unscaled()
Syntax
tween:unscaled()Sets the current tweening segment (created via to{}) to used unscaled time
Unscaled tweens will not be effected by time.scale
tween:onStep(callback)
Syntax
tween:onStep(callback)Sets a callback for each time the tween is stepped (advanced once per frame)
Parameters
| callback | function. The callback function |
tween:onSeek(callback)
Syntax
tween:onSeek(callback)Sets a callback for each time the tween seeks
Parameters
| callback | function. The callback function |
tween:onComplete(callback)
Syntax
tween:onComplete(callback)Sets a callback for each time the tween completes
Parameters
| callback | function. The callback function |
tween:seek(percent)
Syntax
tween: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 |
tween:pause()
Syntax
tween:pause()Pauses the tween
tween:play()
Syntax
tween:play()Plays/resumes the tween
tween:restart()
Syntax
tween:restart()Restarts the tween from the beginning
tween:cancel()
Syntax
tween:cancel()Cancels and destroys the tween (this still counts as the tween completing)
tween:dontDestroy()
Syntax
tween:dontDestroy()Prevent the tween from being automatically destroyed when complete
This is useful if you plan to reuse the tween using restart()
Easing Functions top ↑
Here is a list of all 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 |