How the Fly-In-Watchface works with interpAccel

Watchface Design Expression Help
1

A few people have asked how I made this watchface from the feature announcement:

I’m using the new interpAccel function, along with #DWE#

here’s how I did it in Facer Studios - Spring into Action! - watch face for Apple Watch, Samsung Gear S3, Huawei Watch, and more - Facer (you can use the dim toggle to see the animation restart)

For the second hand (idea could be applied to any element, I reuse this logic on the minute & hour hands):
X Position: (interpAccel(#DWE#,0,2,5)*160)
Y Position: (interpAccel(#DWE#,0,2,5)160)
Rotation: (interpAccel(#DWE#,0,2,5)#DWFMS#)

Because interpAccel has 4 parameters: interpAccel(currentTime, min, max, accelFactor) I use #DWE# as currentTime to supply the current seconds since the watch woke up, and set max to 2 - to say I want the animation to run for 2 seconds.

The idea here is that as currentTime (#DWE#) increases from the minimum (0) to the maximum (2), interpAccel will give me an acceleration over time.

InterpAccel always returns between 0 and 1, so I multiply it by the final value I want - in this case I want the hand to resolve in the middle for the X & Y values (160px), and resolve to rotating with the minute rotation tag (#DWFMS#).

It’s a little tricky at first, but once you wrap your head around it, it’s really fun to use for other features. Let me know if you guys have any questions, or please share your creations using the new interpAccel & #DWE# tags!

8 Likes
2

Thanks for the tutorial. I’ve been trying to figure this one out. The creator tool unfortunately doesn’t give a good way of testing the #DWE# tag without syncing or publishing.

I was working on recreating the animated Adventure Time logo. The sword thrusts through the logo text at the end of the into. Here was my rendition:

Can you help me understand a few more of the details? Using you explanation:
interpAccel has 4 parameters: interpAccel(currentTime, min, max, accelFactor)
Current Time = Generally I see the #DWE# tag used here as a start of an animation because this is based on the wake function.
Minimum = usually set to “0” for the start of the wake time
Maximum = as you stated this is the end point in time. So a 0,2 would start at 0 and end the animation at 2.
accelFactor = this is where things get fuzzy. How does this work? Does the animation move logrithmically from slow to fast? Or is there a deceleration at any point?

The final thing I need help with is understanding the location starting and ending points. In the example is use for my animation: X Position: (interpAccel(#DWE#,0,1,2)*160) it end with the x point at 160. How do I choose the starting point? Is this automatically assumed to be 0? In the case of the animation for the image I’m using, the image is 160px wide, that means 80px are showing at the beginning of the animation. How would I get it to start at -80 and end at 160?

2 Likes
3

Hello,

I am playing around with the interpAccel & #DWE# and I come to the same “fuzziness” about the fourth value “accelFactor” you mentioned in July. May I ask you, if you already understand it? What does the secret “4th factor” mean?

4

This is my loose understanding. The greater the number the more of a delay to the acceleration:

If you pick “0”, then it appears to be a near linear acceleration. In picking a 2 or 4, the acceleration has more of a ramp up of speed. It starts slow for longer.

Here is one of my testers for using the expression. The three horizontal swords have a 2, 4, 0.5 accel factor to demonstrate.

1 Like
5

Thank you a lot! I was just trying and trying - 0.8 was at the end fitting at my watch face:

Tutorial will be ready in few minutes :wink: