We will provide entire chapter on animation, but for now please find an quick example on how to animate graphics.

(Script tags will be stripped)


# Simple Watch animation

Source Code

Please see the **UgSwissWatchDemo** project for the source code created in this chapter. See [Installing examples](🔗) for information on how to download the examples.

We use SVG to create a simple watch consisting of three hands and a circle.



This SVG we paste into a custom control and center the custom control in the middle of the screen.

(Script tags will be stripped)


To enter the custom control, drag the custom control on the page

(Script tags will be stripped)


and then enter the above SVG in the **Source** tab of the page

(Script tags will be stripped)


To polish it, I set the page background to grey.

# Code for animating the second hand

The source code shows to ways of animating the second hand. Option 2, moveSecHand2, is a little more elegant. The API is a little older and not very Swift like, but we fix this.

  • We use a SCD SVG animation to animate the SVG element named **sechand**

  • We rotate **360 degree** within **60** seconds, and continue if not signaled otherwise

  • The **anchor concept** might not be known to everyone, in a nutshell : (1,1) is lower right corner, (0,0) upper left, and (1,0) upper right corner. (0,5;1) puts it the rotation anchor in the midway on the x-axis and uses bottom of the y-axis.

(Script tags will be stripped)


# Entire code with two different options of implementation

Animations with a very few lines of code.