Release #9 of my animated Retrofuturism series:
I very much enjoy your designs and your animation tutorial is quite good as well. Thank you. What tricks do you use in composition of your images/frames to get the looping to work out so well?
primary examples of my question are the watch posted above and this one:
Your background loops very cleanly (love those mountains) and i’m just trying to wrap my head around how you were able to accomplish that so well - i’m assuming it is based on me missing a small step in understanding frame/animation layout.
Also, i’ve been working on having my animations cycle so they use up every minute, it looks like from these examples:
that you’ve been just creating animations that happen once when the watch is first awoken. How do you make animations only trigger then? I feel like I’ve been doing way more work than I need to!
@themikeos There are two ways I have been approaching animation. It depends on the content I am looking to utilize. As far as inspiration goes, I just hop on google or Pinterest and search for a GIF that looks interesting. The two different approaches is based on the GIF size and length. Generally looping GIFs work well with the #Dsm#-#Ds# method. Essentially a GIF that is around 1 second of time within a loop can be modified to fit within that 1 second conditional loop expression. Others that are longer like the Super Saiyan or Karate Kid are much longer animations. They tend to last for several seconds and fit better with the #DWE# condition. If you read through the tutorial I added this version on as a reply after the main tutorial.
The design aspect can be difficult. Sometimes I find a GIF that looks interesting, but the extracted frames just don’t lend well to either the expressions available or the performance of the watch. I have the Huawei Classic and the processing speed is somewhat limited compared to more recent watches. I have noticed even with my own designs there can be jumpy on my watch. My best guess has been 4-12 frames per second depending on the size of the images.
Right now I am trying to make a decision with a particular design I’m considering. I found an image that is natively a 60 frame loop. The image flip rate is 0.03s. So this equates to a 1.8 seoncd loop. Obviously this is too long to utilize the #Dsm#-#Ds# method, but it seems to short to use the #DWE option. So I am at a crossroads. I can either drop frames to somehow squeeze it into 1 sec or slow things down.
Option 1: Speed it up (1 sec loop)
I could essentially drop 2/3 of the frames leaving 20 frames. Question would be two fold. Does the animation still hold up in the shorter time? Meaning does it look smooth. Second part is will most watches be able to render all 20 frames in the first place?
Option 2: Slow it down
A 0.03s flip rate equates to around 33 frames per second. I could lengthen the flip rate to something like 8 f/s. This would produce a 7.5 second animation with no loop. This seems like the best option at the moment. Design consideration would be, does the animation still look cool being slowed down so much? Also is 7.5 seconds enough time? Is the final image worth leaving static? I like when the animation resolves and comes to an end point? For instance I added a couple of frames to the end of the SS face to have Goku get back in a ready stance.
Option 3: Get Mathtastic
I’ve been thinking there may be a way to combine the squarewave function and the first option to squeak out 2 second loops. Either way I’ll need to drop frames anyway to make it run lighter. I think I can incorporate the on/off function of the squarewave to have 2 x 1 second loops that will alternate. The plan is to probably drop 1/2 the frames leaving two loops of 15 f/s. So 30 frames total over 2 seconds.
We will have to wait an see. Retrofuture 10 in development.