Tutorial: Moving Elements on and off the screen

I have come up with a way to move elements on and off the screen which in the past I did with the premium programmable VAR Toggle.

The idea: Move an element onto the screen every 10 seconds, keep it there for 5 seconds, and then move it off the screen again.

The solution: This solution may not be the ultimate one since it requires multiples of the same element. Maybe there is a more efficient way, although the number of expressions that may be needed may cause issues with WFF. I use 3 times the same element and need to work with the opacity and a timer. I set the time to move an element to 1 second. This gives enough time to move an element, and it looks smooth.

Element1: move it into position every 10seconds, when S=0, 10, 20, 30, 40, 50:

Condition: (#Ds#%10)=0

Opacity: 100

Element2: show it on the screen for 5 seconds in between movements:

            Opacity: `$(#Ds#%10)>0&&(#Ds#%10)<5?100:0$`

Element3: move it off the screen every 10 seconds, when S = 5, 15, 25, 35, 45, 55:

            Condition: `(#Ds#%10)=5`

            Opacity: 100

Timer: when an element is to be moved, we’ll need a timer to start at 0 and run for 1 second. The below will constantly run from 0 to 1 (try it in a text field, you’ll see what it does):

            `(((#DWFSS#/6)%60)-#Ds#)`

To move an element from position A to position B for exactly 1 second, the speed needs to be adjusted according to the distance. However, I figured that the above timer multiplied by 140 is speed that is acceptable for me. So, the other way around, I want the element to travel for 140 steps in 1 second. This works well for moving elements on/off the screen. Moving elements on the screen itself, you’ll have to play with the speed. You might think, why not use the sinus function to move elements back and forth. Problem with trigonometric functions is the exact positioning when you what an element to stay in a position for a while. For a pendulum, sinus will work.

Example: element is positioned at X=86.

To move it off screen to the left, the formula is: 86 – Timer*140

To move the element onto the screen to position 86, it will be: -54 + Timer+140

The formulas will be the same for moving up, down, or to the right.

Taking the battery text on the left from the working sample watch face further below, the 3 element are:

Element1 “Batt Txt Move on”:

            X: `$(#Ds#%10)=0?(-54+(((#DWFSS#/6)%60)-#Ds#)*140):-200$`

            OP: 100

Element2 “Batt Txt 5s”:

            X: 86

            OP: `$(#Ds#%10)>0&&(#Ds#%10)<5?100:0$`

Element “Batt Txt Move off”:

            X: `$(#Ds#%10)=5?(86-(((#DWFSS#/6)%60)-#Ds#)*140):-200$`

            OP: 100
9 Likes

Nice tutorial :+1: I found that the same in, hold, out and wait cycle can also be done in a single layer with one WFF compatible expression:

(400-(240clamp(((#DWFSS#/6)%10),0,1))+(240clamp((((#DWFSS#/6)%10)-5),0,1)))

This gives 1 second moving in, 4 seconds holding, 1 second moving out, then 4 seconds off screen before repeating. Might be a useful alternative if you want to avoid duplicate layers.

4 Likes

OK cool, looks interesting, going to have a look at that!

Can you put the formula in backticks : `
otherwise some operands seem to be missing…

2 Likes

(400-(240*clamp(((#DWFSS#/6)%10),0,1))+(240*clamp((((#DWFSS#/6)%10)-5),0,1)))

2 Likes