Technology Article

Basic Tweening

Tweening is accomplished using the tweener global object. The tweener object is constructed at startup time and is available for the lifetime of the application.

Creating tweens

You can create new tweens using the createTween method on the tweener global object. The createTween method accepts 4 parameters:

  • The object that is being tweened
  • The duration of the tween in seconds
  • A table of properties on the object that are being tweened
  • A table of options controlling the tween

tweener:createTween(obj, 0.25, {x = 10})

This creates a new tween that sets x to 10 over a period of 0.25 seconds on the object called obj. You can tween multiple properties at once by providing more than one property to the properties table parameter like so:

tweener:createTween(obj, 0.25, {x = 10, y = 2})

Relative tweens

You specify that tweened properties are relative instead of absolute. That is that the values to tween the properties to are relative to the current values. This is done through the relative option in the options table.

tweener:createTween(obj, 0.25, {x = 10}, {relative = true})

Tween listeners

Tween objects are created by the createTween function. Tween objects derive from EventDispatcher, which means you can listen for events on the tweens. Tweens fire two events while running : UPDATE, and COMPLETE.

local tween = tweener:createTween(obj, 0.25, {x = 10})
tween:addEventListener(luster.tween.Tween.UPDATE, function() end)
tween:addEventListener(luster.tween.Tween.COMPLETE, function() end)

Chaining

Tweens can be chained, meaning that one tween will be run as soon as the one it is chained to is finished.

tweener:createTween(obj, 0.25, {x = 10}):chain(luster.tween.Tween(obj, 0.25, {y = 10}))

The y property tween will be run as soon as the x tween has finished. You can chain multiple tweens together to create long lines of effects.