[Tutorial] Creating an animated watch face

by u/Goodminton

I've seen this discussed a few times around here, and there were a few people that had the right idea, but the execution wasn't quite perfect. I'll do my best to give an explanation of a method I've found to work fairly well and can be expanded to many different situations.

As you may or may not know, Facer watch variables (#Ds#, #Dm#, etc etc) can be used in equations to define the opacity, width, height, x, and y of any object. With the right equations, we can use this to our advantage to create animations.
Scenario: We have a set of 4 images that we want to cycle through, one every second, on the watch face to create an animation.
To accomplish this, we must use the Opacity property of each image so that the opacity is 0 on 3 of the frames, and 100 on the fourth. This will make each image appear for only the second where the opacity is set to 100, and disappear for the other 3 frames.
Something like this:

Frame #  1    2    3    4
Image1   100  0    0    0
Image2   0    100  0    0
Image3   0    0    100  0
Image4   0    0    0    100

To make an equation that does this which facer can use, we can use conditionals as well as the modulus (%) operator.

Image 1 Opacity:  $(#Ds# % 4) = 0.0 ? 100 : 0$
Image 2 Opacity:  $(#Ds# % 4) = 1.0 ? 100 : 0$
Image 3 Opacity:  $(#Ds# % 4) = 2.0 ? 100 : 0$
Image 4 Opacity:  $(#Ds# % 4) = 3.0 ? 100 : 0$

In general form:

$(#Ds# % totalFrames) = frameNumber.0 ? 100 : 0$
Be very careful about parenthesis and dollar signs when entering equations into Facer. Facer is very picky about that. Also, it's important to add the .0 to the end of the frameNumber for some reason.
I used this method to create an animated pikachu sprite watch face, which can be found here and anyone is free to play around with. Also remember that this isn't limited to just using #Ds#. You can use any of the variables and properties to create interesting effects.

Anyways, hope this helps somebody, happy animating!