Tutorial – How-To (Animated Gifs)

Tutorial – How-To
In this tutorial, we will explain how to create a watch design using an animated image. No special software will be needed.

Step 1 – How it Works
Animating an image can be done several ways. It can be moved around the screen, rotated, moved back and forth, faded, and a number of other methods. See the facer documentation for these examples. This specific tutorial will focus on emulating an animated gif file. These gifs represent a series of image files that play in sequence to give the impression of a video. Usually these gifs are short in sequence lasting only milliseconds or looping forever.
Unfortunately, Facer does not support the use of animated gifs at this time. However, there is a work around using some math and the transparency field. The method to accomplish this using the Facer creator is to upload a series of images and use the transparency field to hide and unhide the images in sequence, thus recreating the video effect.

Step 2 – The Maths
First, thank you Mellin for assisting with this formula. The transparency field can be toggled on (100%) and off (0%) by the incorporation of some math using the expression tag for seconds. There are two “tags” that produce the values necessary to give a short time based window for the calculation to produce a result of on or off for the transparency field.
#Dsm# = Second in minute plus milliseconds
#Ds# = Second in minute
By subtracting the two, we can reveal the current milliseconds. This value has a range of 1.000 to 0.000. For instance: #Dsm#-#Ds#. From here we need to create a condition of when the image needs to be visible (transparency = 100) or hidden (transparency = 0). This is basically a range of time in milliseconds.
To calculate when the frame is visible we need a start and end time to compare. Here is the logic we are going after:
If (Current Time > Start Time AND Current Time < End Time), (Then (Transparency = 100), If Not (Transparency = 0)
To set up a conditional If Than statement in Facer we use the following symbols:
$(Current>Start)&&(Current<=End)?100:0$
Unpacking the calculations for the start and end times is a little more involved. Because we are using the moving target of the current millisecond as show calculated above. First we need to determine the length of the frames within the animation.
Typical movies are shot at either 24 or 30 frames per second. Gifs can vary wildly from this. Later on in this tutorial I will discuss some of the limitation and recommendation for chosing the appropriate frame rate for these animations. For the purposed of the tutorial we will use a frame rate of 8/sec. Understanding the frame rate is vital in “keying” the frames to the time you want them to become visible.
1.000 / 8 = 0.125
In the example of an 8 frame animation we would want the following outcome if the animation is to loop once during each second of time elapsed:
Start End
Frame 0 = 0.000 0.125
Frame 1 = 0.125 0.250
Frame 2 = 0.250 0.375
Frame 3 = 0.375 0.500
Frame 4 = 0.500 0.625
Frame 5 = 0.625 0.750
Frame 6 = 0.750 0.875
Frame 7 = 0.875 1.000
Fortunately the calculation can be shortened by the interval of the frame rate needed:
X = frame number //This is why the first frame starts with Zero
(Current) > (x * Start)
(#Dsm#-#Ds#) > (x * 0.125)

Step 3 – Express Yourself
Putting it all together with the full expression you get the following:
$(#Dsm#-#Ds#)>(x*0.1)&&(#Dsm#-#Ds#)<=((x+1)*0.1)?100:0$
This expression will need to be added to the transparency field for each image. Don’t forget to update “x” for the frame that you are on.

Step 4 – Understanding Limitations
a) Performance
While the thought of creating a smooth animation is the ideal, there are limitations to both the functionality of the facer application and the watch itself. There is computational time in rendering the instruction set and the image that affect the performance of the frame rate of the animation. Only testing of these will determine the best/smoothest frame rate for your animation. I have tested with 8 frames with modest success but have met failure when using 50 frames. Skipped frames will undoubtedly affect the overall performance of your design.
Some sample frame rate calculations:
2 = 0.5000
4 = 0.2500
5 = 0.2000
8 = 0.1250
10 = 0.100
16 = 0.0625
20 = 0.0500
25 = 0.0400
b) Animation Length
This calculation works with the assumption of creating a 1-second video. The availability of using milliseconds for keying frames is necessary for creating multiple frames per second. Moving up the time scale to the next base value would be the utilization of the Smooth value for minute hand rotation. You can get a decimal with this value, but the limitation essentially equates to 1 unit every 3.6 seconds. (Someone correct me if I am calculating this wrong).
There is a possibility of utilizing the ‘wake’ time elapsed tag (#DWE#) to create a longer animation, but the consideration here would be the ending frame. Since the seconds are expressed in hundredths instead of thousandths, the best frame rates would use intervals of 5. If the watch is awake for the standard 5 seconds, a frame rate of 10/sec would require 50 images. This ends up getting a little bulky in the design editor. Again, this consideration comes down to the performance of the app and watch. Smooth animations are limited by the frame rate and ability to not have dropped frames.

Step 5 – Tips on Composition
Due to the aforementioned limitations some design considerations need to be made.
a) Infinite Loops
The animation will need to fit in the span of 1 second. This may limit type and style of animation selected. Pay close attention to the animation you intend on using. It will continue looping as time matches on.
b) Subject Start/End Location
Because of the looping action of the animation the subject generally should follow one of two design considerations. The first is that the animation ends in a state and position identical to the starting position. For instance a walking figure would start and end on the same foot. The other option is for the animation to start and end off frame. Typically the image location is the same for each frame, but if your subject in the image is moving you can manipulate the size or use masking to create the effect.

Step 6 – Creating your Assets
The method I use for creating the frames is by utilizing a web site to extract an gifs images. The following site works good and is free to use:
Split GIF image in frames
You have to choice of either uploading your own image or using a url. Once uploaded, select the split option of “output images in png format”. Once split, you can download the files together in a zip folder at the bottom of the page.
From here you can pare down your selection of frames. If you plan on using 8 frames a second and your gif has 30 frames, then choose every 3rd or 4th image. Copy these into a separate folder and play through them to see if the effect still looks good.

Step 7 – Uploading Assets
There is no specific instruction for uploading your images to the Facer app. The standard process applies. I would recommend a few things however, order then and arrange them in one direction or another (i.e. either up or down). The gif extractor page does name your files starting with 0 so this makes things easier to keep track of.
I would also recommend duplicating frame 0 again and place it at the bottom as a background image with the transparency set to 100. This is more so for the generation of the static image for the Facer store. Sometimes there is a bug in the view when the time is set to 12:00:00 where frame 0 doesn’t render. Having this static image ensures there is an image in this view.

Step 8 – Animation Timing
As demonstrated in the instruction above, use the following expression in the transparency field for each image in the animation sequence:
$(#Dsm#-#Ds#)>(xframerateinterval)&&(#Dsm#-#Ds#)<=((x+1) framerateinterval)?100:0$
Do not forget to replace both “x” with the frame number and “framerateinterval” with the value for your frame timing:
Example (frame 5 of an 8/sec frame rate) =
$(#Dsm#-#Ds#)>(5*0.125)&&(#Dsm#-#Ds#)<=((5+1)*0.125)?100:0$

Step 9 – Samples
Working Samples (8 frames/sec):

Broken Sample (50 frames/sec):

*I plan on retrying this with the #DWE# tag since the animation I was trying to use was around 3-4 seconds originally.

8 Likes

Worked on the broken example and utilized the “wake” feature. It is 50 frames that runs for 5 seconds. The 10 frame/sec is a little jumpy on my Huawei. The animation also only runs through once. So if you have a longer wake time you will only see the animation once.

1 Like

This is great! Thanks for putting this together.

I finished creating some prototype faces to test the animation smoothness. Here are faces with 4, 5, 8, and 16 frames per second. You should be able to see how your particular watch performs. I do also think some experimentation needs to take place with these animation prototypes with various other elements on the screen. Right now all I have is a simple digital clock with seconds read out.

4 Frames:

5 Frames:

8 Frames:

16 Frames:

1 Like

GREAT tutorial! I’m impressed with your level of detail and instructional approach.

I discovered a very easy animation for any item: simply move one image around. I have a small image moving across the screen, starting at the left and moving to the right, over a whole minute. At the end (i.e. beginning of the next minute), it starts again on the left. The programming is SO EASY:

  1. pick an image, make it small
  2. edit the X Position: (#DWFSS#-10)
    (I used “-10” to start my small image off-screen)

That is it. Because DWFSS is a number from 0 to 360, it fits perfectly across a 320px screen.

You can play around with X and Y positions, based on the DWFSS smooth seconds number, or use it for the rotation and/or transparency values.

BOOM!

1 Like

Great tutorial!! I am creating a watchface right now using this method, what is the most frames yo uhave succesfully tried? The more the better for me for a smooth animation, but i don’t want to push it…i currently have 14 frames and would like to go higher, i split my GIF using the website you said and have 80 pics now. Was just wondering if you have tried more frames. I know this is an old thread but figured i’de ask away :smiley:

Search the forum for animation performance. I’ve got a graph and some examples with excessive frame loads.

thank you, i actually read over that one yesterday and am messing around with all of that, thank you for the reply

check out my newest animated face. I have a 20 frame loop with a 25 frame single run overlaid. With 55 frames, plus all the cover art and static art for Dim screen the animation is a little choppy.

2 Likes

nice one…how many layers is that face? the one i’m currently working on has 110 layers/elements and i’m only half way finished…how many start to lag to watch/face? i didn’t search for this yet, figured I’d throw it on you and see if you had dealt with this issue.

Your tutorial has been INCREDIBLY helpful :slight_smile: Thanks for posting it!!! I used your expressions to animate my newest watchface “Dabbing Unicorn.”

2 Likes

Lol!

Nice face!

1 Like

thanks :slight_smile:

@eradicator09 very nicely done . Love the tutorial I am learning so much from you guys.

1 Like

@eradicator09 Your tutorials have been amazing! I’ve made a couple of animated watch faces and am having a ton of fun with it. I just tried to do a 5 second, 6 fps animation using the #DWE# formula, but am having trouble with it. I used the formula letter for letter on the Long Animation tutorial, but am just getting a blank screen. Any tips? Thanks!

5 second animation with 6fps:

$(#DWE#)>(0*0.1667)&&(#DWE#)<=((0+1)*0.1667)?100:0$
$(#DWE#)>(1*0.1667)&&(#DWE#)<=((1+1)*0.1667)?100:0$
$(#DWE#)>(2*0.1667)&&(#DWE#)<=((2+1)*0.1667)?100:0$
$(#DWE#)>(3*0.1667)&&(#DWE#)<=((3+1)*0.1667)?100:0$
$(#DWE#)>(4*0.1667)&&(#DWE#)<=((4+1)*0.1667)?100:0$
$(#DWE#)>(5*0.1667)&&(#DWE#)<=((5+1)*0.1667)?100:0$
$(#DWE#)>(6*0.1667)&&(#DWE#)<=((6+1)*0.1667)?100:0$
$(#DWE#)>(7*0.1667)&&(#DWE#)<=((7+1)*0.1667)?100:0$
$(#DWE#)>(8*0.1667)&&(#DWE#)<=((8+1)*0.1667)?100:0$
$(#DWE#)>(9*0.1667)&&(#DWE#)<=((9+1)*0.1667)?100:0$
$(#DWE#)>(10*0.1667)&&(#DWE#)<=((10+1)*0.1667)?100:0$
$(#DWE#)>(11*0.1667)&&(#DWE#)<=((11+1)*0.1667)?100:0$
$(#DWE#)>(12*0.1667)&&(#DWE#)<=((12+1)*0.1667)?100:0$
$(#DWE#)>(13*0.1667)&&(#DWE#)<=((13+1)*0.1667)?100:0$
$(#DWE#)>(14*0.1667)&&(#DWE#)<=((14+1)*0.1667)?100:0$
$(#DWE#)>(15*0.1667)&&(#DWE#)<=((15+1)*0.1667)?100:0$
$(#DWE#)>(16*0.1667)&&(#DWE#)<=((16+1)*0.1667)?100:0$
$(#DWE#)>(17*0.1667)&&(#DWE#)<=((17+1)*0.1667)?100:0$
$(#DWE#)>(18*0.1667)&&(#DWE#)<=((18+1)*0.1667)?100:0$
$(#DWE#)>(19*0.1667)&&(#DWE#)<=((19+1)*0.1667)?100:0$
$(#DWE#)>(20*0.1667)&&(#DWE#)<=((20+1)*0.1667)?100:0$
$(#DWE#)>(21*0.1667)&&(#DWE#)<=((21+1)*0.1667)?100:0$
$(#DWE#)>(22*0.1667)&&(#DWE#)<=((22+1)*0.1667)?100:0$
$(#DWE#)>(23*0.1667)&&(#DWE#)<=((23+1)*0.1667)?100:0$
$(#DWE#)>(24*0.1667)&&(#DWE#)<=((24+1)*0.1667)?100:0$
$(#DWE#)>(25*0.1667)&&(#DWE#)<=((25+1)*0.1667)?100:0$
$(#DWE#)>(26*0.1667)&&(#DWE#)<=((26+1)*0.1667)?100:0$
$(#DWE#)>(27*0.1667)&&(#DWE#)<=((27+1)*0.1667)?100:0$
$(#DWE#)>(28*0.1667)&&(#DWE#)<=((28+1)*0.1667)?100:0$
$(#DWE#)>(29*0.1667)&&(#DWE#)<=((29+1)*0.1667)?100:0$
$(#DWE#)>(30*0.1667)&&(#DWE#)<=((30+1)*0.1667)?100:0$
2 Likes

Thanks so much! Worked like a charm!

1 Like

An easier way is to use a free screen recorder which has the option to export as GIF file format.

can you create variations of long animations?
exemplo: Mr Jones Watches - Last Laugh Tattoo - watch face for Apple Watch, Samsung Gear S3, Huawei Watch, and more - Facer

I don‘t think this is a frame animation. The effects are simply made with the facer creator itself.

1 Like