Animations

Experiments may require objects to move on the screen, or otherwise animate a value.

Experimentor makes it easy to animate something:

animate animateMe.x from 0% to 100% in 2 seconds

The above code immediately starts animating the animateMe.x from 0% (regardless of the current value) to 100%, and within 2 seconds the value will be at 100%.

You can also store the animation object into a variable, like this:

define animateX = animate animateMe.x from 0% to 100% in 2 seconds

In this case we are defining a new variable called animateX that will hold the animation object, but you could of course use an already defined variable as well.

Animation actions

Just like the timer, there are two basic actions that can be performed with an animation:  starting it and stopping it.

Starting an animation

To start an animation simply use the start keyword and then the name of your animation:

start animateX

Note: Starting a completed animation or an in-progress animation resets the “from” and “to” values; if the “from” value is a variable or expression the expression is re-evaluated when the animation is re-started (as is the “to” value).

Stopping an animation

Similarly, to stop an animation you can simply use the stop keyword followed by the name of the animation you wish to stop:

stop animateX

Animation example

The following example demonstrates how to animate a circle on the screen from the bottom right to the top left and then uses a “when” expression to keep animating it again and again until the session is complete.


// This short little program continuously animates a rectangle from

// the bottom left to the top right of the screen.

// It also demonstrates how to reuse an animation.


// First, create a rectangle template

define type of rectangle template

       width = 100

       height = 100

       colour = #FF0000

       isVisible = true

       x = 50%

       y = 50%

end rectangle


// Now create an actual rectangle instance from the template

define animateMe = create template


// Define the length of time we want the animation to take.

// We’ll define it in this “duration” variable,

// so that all the animations will be the same duration.

define d = 2 seconds


// Move our rectangle from the bottom left (x=0%, y=0%) to the

// top right (x=100%, y=100%) in 2 seconds

// Notice that while the animation is running but the program keeps going

// so that we can do other things

define animateX = animate animateMe.x from 0% to 100% in d

define animateY = animate animateMe.y from 0% to 100% in d


// By using a when clause we can do things when the animation completes.

// In this case, we’re re-starting the same animation again.

// This will cause the rectangle to keep moving from the bottom left to the

// top right of the screen over and over again until the session ends

when animateX.Completed then

       // You could also set animateX.from = 100% and animateX.to = 0%

       // to animate it back (do it for both the X and Y animate variables)

       start animateX

       start animateY

end when


// Wait for ten seconds and then end the session (which will of course

// also end the animation)

wait for 10 seconds