Xojo Documentation Xojo Documentation

Web apps can use the WebAnimator class to move, resize, rotate, scale and change the opacity of controls on a web page at run-time.

In order to animate controls, you add a WebAnimator control to your web page. This creates an instance that appears in the Shelf. You can then use this WebAnimator to animate any of the controls on the web page.

With WebAnimator, you can animate a control a single time (such as for moving it from one position to another) or you can queue up a series of animations (such as spinning a control before moving it to a new position).

Animator Actions

Move

The Move method moves the specified control from one location to another. This example in the Action event of a button moves it to coordinate 100, 100 over a period of half a second:

Animator1.Move(Me, 100, 100, 0.5)

Scale

The Scale method scales a control to a percentage of its original size.

This code reduces an image to 50% of its original size over a period of one second:

Animator1.Scale(ImageView1, 50, 50, 1)

Resize

The Resize method resizes a control to a specific pixel size.

This code resizes an image to be 100x100 over a period of one second:

Animator1.Resize(ImageView1, 100, 100, 1)

RotateX

RotateX rotates a control along the X-axis to the specified degrees.

This code flips an image upside down (180 degrees) in half a second:

Animator1.RotateX(ImageView1, 180, 0.5)

RotateY

RotateY rotates a control along the Y-axis to the specified degrees.

This code creates a mirror image of an image in half a second:

Animator1.RotateY(ImageView1, 180, 0.5)

RotateZ

RotateZ rotates a control around the Z-axis to the specified degrees:

This code spins an image to get it to be upside down in half a second:

Animator1.RotateZ(ImageView1, 180, 0.5)

SkewX, SkewY

The skew methods skews (or distorts) a control along the specified axis.

This code skews an image 20 degrees:

Animator1.SkewX(ImageView1, 20, 0.5)

Opacity

The Opacity method changes the opacity to the specified percentage (where 0 = completely transparent).

This code sets an image to half opacity making it look faded:

Animator1.Opacity(ImageView1, 50, 0.5)

Example Projects

• Examples/Web/Graphics/Animator/Animator

See Also

WebAnimator class; UserGuide:Framework topic