[TOMAJA Tutorial] Dynamic Second Hand Wake Up Animation - Realistic Effect in Only 4 Simple & Easy Steps

(UPDATE Dec 10, 10:30 pm: minor, but very important :slight_smile: correction of some rotation expressions)

Hello again,

I will show you an easy possibility to have a great effect you could immediately use at your watch face creation: Here is it:

Here are the four phases:

1 - DIM Mode - Second hand is waiting in the “zero position” for action :wink:

2 - Waking up the watch - Second hand “falls down” in order to find the correct position

3 - Shaking around to by super realistic :wink: and finally…

4 - Second hand is running as usual at the right time

1 - DIM Mode

<img src="/uploads/default/original/2X/0/09608511d6d40f82713911f5321829b2de10531c.png" width=160" height=“214”>

This is the second easiest part in this tutorial. Please just copy (duplicate) your second hand and set the rotation to zero.

Rotation: 0

Done :slight_smile: . To be sure that the second hand is waiting in the top position.

2 - Waking up the watch

Next easy step to do. You need only to modify the rotation of your main “Second Hand” element from #DWFSS# to

Rotation: (interpAccel (#DWE#,0,2,0.8) * #DWFSS#)

Here is the explanation of this function. With another words, the second hand position starts at Rotation 0 and reach the correct Rotation #DWFSS# (correct time) in 2 seconds with a kind of dynamic (I do not really understend in detail*) of 0.8 :wink:

The beauty about this solution is, that afterwords a standard rotation is running (Step 4). So we do not need to hide this element for long time period. What should be done is simple hide this main “second hand element” for shaking time, like this:

Transparency: $ #DWE# < 2 || #DWE# > 4 ? 100 : 0 $

*few seconds ago the @eradicator09 explained also the mystic secret fourth factor of interpAccel :slight_smile:

3 - Shaking around

This is easy as well. To have a nice realistic shaking effect let’s use the sinusoid function - starting smoothly with linear decreasing of the amplitude. Sound maybe complicated :wink: but in reality you could just copy this formula to Rotation

Rotation: ( #DWFSS# + ( ( sin( (pi) + ( ( 4 - #DWE#) * pi * 5) ) ) ) * ( - ( 4 - #DWE# ) * 5 ) ) )

Details to the sinusoid basics (even if used for another interesting purposes) are excellent explained by @Mellin here.

This additional “second hand element” is working for us only 2 seconds (in this case), so lets set this in transparency:

Transparency: $ #DWE# >= 2 && #DWE# <= 4 ? 100 : 0 $

4 - Second hand is running as usual

Finally, this is the most easiest part of this tutorial (or maybe in the whole galaxy) :slight_smile: . You don’t need to do anything! Because of the step 2 - this step is working also at normal conditions.

Here is the watch to test it at your smart watch immediately if you like:

Moreover, the inspection mode is open again at: Facer - Thousands of FREE watch faces for Apple Watch, Samsung Gear S3, Huawei Watch, and more . You can find there the whole watch face “programming” in detail. By the way the shadows have been done in the was of elements duplication - described here.

Have a lot of fun with your dynamic second hand :wink:

8 Likes

I’m so proud of my student…

2 Likes

I need to be ready for the time after… you decide to retire :fishing_pole_and_fish: :slight_smile:

1 Like

@Tomas nice effect, excellent presentation!

2 Likes

Thank you! I like to try new things and I am happy, if you like to read about this…

1 Like

@Tomas another great one! Make sure you submit these to us in Medium format so we can publish them at news.facer.io. We have a bit of a backlog but should be able to publish some of these next week.

1 Like

Hello there. Great, that you like it! I will prepare all tutorials for Medium in next days…

1 Like

Hello, so I prepared my latest tutorials as “Medium” articles right now. It is OK when I give you here just the general link Tomas Joscak – Medium? Anyway, I use this platform only for Facer Tutorials.

2 Likes

I’m totally using this action for an upcoming design. See if you can catch the effect in the next Flightschool release (A102 - Airspeed)

1 Like

Can’t wait to see it :wink:

1 Like

Just WOW…

2 Likes

@nobel.mixed You are doing as great job Flagging up these Gems . Good Job. :slightly_smiling_face:

2 Likes

I just found this yesterday - it’s exactly the effect I have been looking for .

What a great tutorial. It certainly pays to search here!

2 Likes

Yes @Tomas has left some amazing stuff for us to find along the way . Intresting that you find these Gems when you are ready :::)))

3 Likes