UserGuide

Web Animator

From Xojo Documentation

The WebAnimator control is used to move, resize, rotate, scale, and change the opacity of other controls on a web page. If the browser supports 2D and/or 3D hardware acceleration, then the Animator uses it.

Usage

Web Animator

This example resizes a Text Area on a web page from its original size down to 30x30 in two seconds. First add an Animator and Text Area to a web page and name them ControlAnimator and ShrinkArea). Then add a Button to the page and put this code in its Action event handler:

ControlAnimator.Resize(ShrinkArea, 30, 30, 2)
ControlAnimator.Play

Key Frames are used to queue up a collection of animations so that they can run all at once. For example, to have the above Text Area shrink and go back to its original size, you would put this code in the Action event handler of the button:

Var w, h As Integer
w = ShrinkArea.Width
h = ShrinkArea.Height
ControlAnimator.Resize(ShrinkArea, 30, 30, 2)
ControlAnimator.AddKeyFrame(2)
ControlAnimator.Resize(ShrinkArea, w, h, 2)
ControlAnimator.Play

AddKeyFrame in this code adds a key frame at the two second mark, which is after the first animation has completed. Then the resize back to its original size is queued.

Example Projects

This project shows you various ways Web Animator can be used to modify a graphic that is displayed in a Web Image View:

  • Examples/Web/Graphics/Animator/Animator

See Also

WebAnimator class; UserGuide:Web UI topic