[Tutorial] How To Code Animation

what about just going between 2 images per second? or even just blinking an image on and off?

@danielcarino for something like that you could use the squareWave function:

squareWave(current, amplitude, period, xOffset)

This is pretty quick and untested, but you could do something like this on image 1 transparency:

(squareWave(#Dsm#,100,0.5,50))

And then on image 2 transparency:

(squareWave(#Dsm#,100,0.5,50)*-1)
1 Like

great! right now i only needed to understand the simple image 1 transparency and it seems to work great

1 Like

Thanks. What would you do if you need 4+ pictures? Also, how do you have change over a minute, or is that possible?

my understanding if you want an animation over time like 4 pictures within a minute is to use

this same method however divide 360 by the number of images you have

so 4 images would be the code above but instead of the first 0 - 100 degrees it would be every 90 so

$#DWFSS#>0&&#DWFSS#<=90?100:0$

$#DWFSS#>90&&#DWFSS#<=180?100:0$

$#DWFSS#>180&&#DWFSS#<=270?100:0$

$#DWFSS#>270&&#DWFSS#<=360?100:0$

same goes with any number so 6 images would be every 60 degrees and 8 image would be every 45 degrees…
the code is: the transparency = 100 when the degrees is between those numbers

(i think?)

so technically this would mean 3 images every minute spaced our equally would be every 120 degrees

UPDATE: i used this with 6 images and it works great check out the watch here

2 Likes

Thanks, this really helped. Also, nice watchface. :+1:

How would you do one for each hour of the day?

Hi Jaymi, I used the following tag to change an image of the globe turning (24 images in total), one time zone every hour.

$#DH#=13?100:0$

Where the 13 (1pm) is, I just changed that to the next hour for the following image. So that during the hour of 1pm (1pm - 1:59pm) that image would be at 100 transparency and at all other times it would be at 0. The end result was one great looking watch face that was slightly different every hour.

I’m still pretty new to this watch face creation business myself. I found this document to be very handy.

I hope this info helps.

Cheers,
Lochie

1 Like

@Cue888 Thanks for sharing tips! We do have a more up-to-date guide for Facer with a full listing of tags here:

1 Like

Thanks. I think the doc it going to help a lot :slight_smile:

Hi! i’m new here! About animation and codes. Where are the codes? Can’t find where to type them. And can some one pleace give me step by step instruction? Can’t add animation to baground:( Thank you))

Curious, what does the “xOffset” value stand for?

If you picture a graph of the wave, xOffset lets you shift the whole wave to the left or right. So if you wanted your graph to start on a crest of the wave instead of the trough (or vice versa), you could use xOffset to shift it over.

I am using the example listed by danielcarino using 6 images. Buuut, I want the same six images to cycle in order with 1 p/second. Modifying the TAGS I can only get 1 image every 10 seconds, OR, 1 image p/second for 6 seconds. Then, it’s NO images for the next 54 seconds… What am I doing wrong?

hello can you link us with your design and open it for inspection. Thanks.

Here are the TAGS for each instance I’ve described:
(I actually made a mistake in the previous description of the first example)

6 images spread out over only 10 seconds, nothing for the following 50 seconds,
$#DWFSS#>0&&#DWFSS#<=10?100:0$
$#DWFSS#>10&&#DWFSS#<=20?100:0$
$#DWFSS#>20&&#DWFSS#<=30?100:0$
$#DWFSS#>30&&#DWFSS#<=40?100:0$
$#DWFSS#>40&&#DWFSS#<=50?100:0$
$#DWFSS#>50&&#DWFSS#<=60?100:0$

1 image per 10 seconds covering 1 minute,
$#DWFSS#>0&&#DWFSS#<=60?100:0$
$#DWFSS#>60&&#DWFSS#<=120?100:0$
$#DWFSS#>120&&#DWFSS#<=180?100:0$
$#DWFSS#>180&&#DWFSS#<=240?100:0$
$#DWFSS#>240&&#DWFSS#<=300?100:0$
$#DWFSS#>300&&#DWFSS#<=360?100:0$

LMK if this is sufficient information.

http://community.facer.io/t/tutorial-how-to-animated-gifs/6007

Try to use this tutorial to animate images.

1 Like

Ok, thank you. I am using 6 images and the playback for 6 is very fast. I am not looking for “smooth animation”, I am looking for “image…image…image…ETC”. I think the key is to multiply my seconds and ms *2. This will give me double the ms to divide by my 6 images. But, I am unsure of where to do my multiplying. Am I on the right path? Is this possible? Any help will be greatly appreciated.

Check out some of the other tutorials I’ve put together on animations: Facer Tutorials

What may work is the “Long Duration” animation. Just set the times as something like this:

$(#DWE#)>(1*1)&&(#DWE#)<=((1+1)*1)?100:0$
$(#DWE#)>(2*1)&&(#DWE#)<=((2+1)*1)?100:0$
$(#DWE#)>(3*1)&&(#DWE#)<=((3+1)*1)?100:0$
$(#DWE#)>(4*1)&&(#DWE#)<=((4+1)*1)?100:0$
$(#DWE#)>(5*1)&&(#DWE#)<=((5+1)*1)?100:0$
$(#DWE#)>(6*1)&&(#DWE#)<=((6+1)*1)?100:0$

That should give you 1 picture each second for 6 seconds. Then you just need to decide what you want to do after that. Either place a static frame or put more pictures.

2 Likes

Thank You!!! This helped so much

1 Like