Advanced Example

This example is more complex because it uses tween chains to make the transitions go forth and back, this is possible linking two tweens, one for the forward movement and one for the backward one, using this technic is also possible to make transitions in more steps then two like in this case but with the advantage that they are completely automated: you setup once and the transition sequence go on its own.

Let's see the source code:

; Let's include the Easing library
@INCLUDE "Easing.hws"

; Setup some variables
Items   = {}            ; Each item will show a differen easing function
StartE  = 0             ; First easing
EndE    = 40            ; Last easing

Function UpdateScreen()
   ; This routine will update the screen, tween functions needs the delta time
   ; to be updated so the first thing to do is calculate this value.
   Local cTime = GetTimer(Timer)
   Local dTime = cTime - OldTime

   ; Updates all active tweens

   ; Update the background color
   Box(0, 0, 640, 480, #BLACK)

   ; Display the objects, one for each defined tween
   For Local i = StartE To EndE
      TextOut(Items[i].x, Items[i].y, easing[i], { Color = Items[i].Color })

   TextOut(10, 10, "(left click to quit) DT:" .. cTime - OldTime)

   OldTime = cTime



Timer    = StartTimer(Nil)    ; Start a timer to track delta times
Renderer = SetInterval(Nil, UpdateScreen, 10) ; Call the UpdateScreen every 10ms
OldTime  = GetTimer(Timer)    ; Initialize the time for the delta times calc

; To make a cross chain betweens the to callback functions we need
; to define an empty function so that the first one does not reference
; a nil value.
Local fBackard = Function() EndFunction

Function fForward(id)
   ; Define the forward movement
   Local id =
   Items[id].x = 0
   ; Look at the callaback function, we are referencing to fBackward that in this
   ; exact moment point to the empty function defined above
   tween.start(10000+Rnd(5000), Items[id], { x = 560 }, easing[id], fBackward, { id = id })

; But now we are redefining the fBackward function replacing the
; empty one.
Function fBackward(id)
   ; Callback function used initialize and restart every item
   Local id =
   ; Look at the callback function : it points to fForward so that
   ; when this transition finishes the loop will be started again
   tween.start(10000+Rnd(5000), Items[id], { x = 0 }, easing[id], fForward, { id = id })

; Table with all available easing animations
easing =
{ "linear",
  "inquad", "outquad", "inoutquad", "outinquad",
  "incubic", "outcubic", "inoutcubic", "outincubic",
  "inquart", "outquart", "inoutquart", "outinquart",
  "inquint", "outquint", "inoutquint", "outinquint",
  "insine", "outsine", "inoutsine", "outinsine",
  "inexpo", "outexpo", "inoutexpo", "outinexpo",
  "incirc", "outcirc", "inoutcirc", "outincirc",
  "inelastic", "outelastic", "inoutelastic", "outinelastic",
  "inback", "outback", "inoutback", "outinback",
  "inbounce", "outbounce", "inoutbounce", "outinbounce" }

; Initialize the tweens, one for each animation available
For Local i = StartE To EndE
   Local b = i
   Items[i] = { x = 0, y = 50 + i*8, color = GetRandomColor() }
   fForward({ id = i })


While Not(IsLeftMouse())

The source code is available here.

hollywoodlibs/easing/advancedex.txt · Ultima modifica: 2016/10/06 16:10 da admin
CC Attribution-Noncommercial 4.0 International
Driven by DokuWiki Recent changes RSS feed Valid CSS Valid XHTML 1.0