Slide / Scroll in help please

Watchface Design Expression Help
1

Hi Everyone

Forgive me if this is numb, but im a newie to all these formulas.

I would like to make a image slide in from the left and stay there, could anyone help me with the formula?

thank you
Suzanna

2

hi Suzanna,
you’ll get a bunch of answers if I don’t get back on today, but we’ll need to know a few things:

  1. Are you saying that when the watch wakes up, you want an image to slide in from the left? Or do you want different images to slide in from the left every so often and stay there?

  2. Does the image fill the complete screen? (is it a background?)

  3. Is the image the size of the screen 320 x 320?

Again I may not be back on today, but tons of peeps can help you once you answer these questions.

-John

3

Hi John

thanks for replying, yes what i’m saying saying that when the watch wakes up, you want an image to slide in from the left?

I’ve not completely decided on the image yet but it would be (i had to go to that pesky thing called work :cry ) if i can get the planning right a small heart sliding in from the left but on a 45 degree angle. but i then want it to stay there in the middle of screen and grow in size.
Since i’ve posted I’ve also been wondering if i could do this with the time too? but just slide in not the grown in size bit.
Sorry im not technical literate as you can probably tell.

thanks for your time
Suzanna

4

Here’s how you’d do it.

You’ll need two layers, one to handle the movement onWake and one to handle the growing heart.

LAYERS

HEART - GROW
HEART - MOVE

HEART - GROW
X: 160
Y: 160

  • [ This is the center of the watch]
    W: (clamp(#DWFS#/3,5,195)+25)
    H: (clamp(#DWFS#/3,5,195)+25)
  • [ Presuming your heart image isn’t weird shaped, you’ll want it to grow in both directions equally. If your image isn’t you’ll need to tweak/eyeball it. The above will grow over the course of a minute roughly. You can change the #DWFS# tag to something else if you want it to grow over the course of an hour, etc ]
    T: (0+(interpAccel(#DWE#,1.55,2.85,3)*+100))
  • [ This says to start invisible (0) and grow visible (100) from 1.55 seconds and 2.85 seconds at a speed of 3. Basically, it needs to stay invisble until the heart animates onto the screen stopping at the center at which point it will turn invisble and this layer becomes visible ]

HEART - MOVE
X: (0+(interpAccel(#DWE#,1.5,1.75,3)+160))
Y: (0+(interpAccel(#DWE#,1.5,1.75,3)+160))

  • [ This starts the heart off screen, you may need to move it further for square watchfaces and depending on the size of your heart image. But basically, it starts at 0,0 and moves onWake (#DWE#) from 1.5 seconds to 1.75 seconds at a speed of 3 to the coordinates 160,160. You can tweak speeds by changing the 3 to a higher (slower) number or lower (faster) number. Similarly, extending the time it takes to perform the movement can change things too. Feel free to tweak numbers and see how it affects things, it’s fun experimenting and seeing what happens. EDIT: Also the +160 for both ensures it moves at a 45 degree angle. ]
    T: (100+(interpAccel(#DWE#,0.75,2.85,5)*-100))
  • [ Like the other layer, here we start visible (100) and go invisible (-100. We’re subtracting 100 to get 0) onwake (#DWE#) I’ve increased the seconds so that it will remain visible shortly after reaching the center. Since the other layer is on top it will hide the disappearing trick.

I know I’ve thrown a lot, and hopefully not made it confusing. If so, feel free to ask any questions. There’s a lot of tutorials explaining interpAccel that can help.

2 Likes
5

Oh this is fantastic,
Im off to loose myself in facer design now - thank you ill let you know how i get on.

Would it be possible to do this with the time too - slide in i mean?
Suzanna

6

Yes although you’d lose the onWake stuff.

You’d change the #DWE# tag to something like #DWFSS# or #DWFK# etc…

Unless you meant having the time slide in, in addition to the heart, in which case, yes :smiley: The same fields, etc.

1 Like
7

thank you, ive been on early’s with work.
So only just getting the chance to catch up. i really do appreciate the help

:slight_smile: Suzanna

8

I tried to enter the formulas above, but I couldn’t make it work. >__< Can someone help? I want a picture to slide straight down and then slide back up. (Appear and disappear off the watch screen)

1 Like
9

I made this Test to Illustrate a Continuous scrolling . The formulas are there to make it go the other way but you would gave to build that . I am not on my Laptop at the moment . Pop one of this lines into The Y pos Field and play with the numbers . You need to make a Conditional that looks at the how much DWE has Elapsed then go the other way .Sorry the formulas are liner only . I do not know much about the Accelerating Tags .
.
.

1 Like
10

try this (-160*cos(clamp(1*#DWE#,0,6.283))) for the y coordinate. 160 is how far the image will travel outside and then into middle of the screen (if its full screen image). 6.283 is the full period for the cosine function. Change the 1 to bigger or smaller number, if you want this move faster or slower.

3 Likes
12

Oh wow! :star_struck: :heart_eyes: I thought it stopped working. But I’m just a newbie. It drops down whenever watch awakes!! hahaha… Thank you soooo much!!! :blush:

This is what I just published:

3 Likes
13

LOL
Cool effect!

Do you, maybe, have a formula for object to drop down and to stay at the position (in this case 160)?

1 Like
14

That is easy, clamp the period to half (3.1415 in place of 6.283).
image

2 Likes
15

Sure, it’s easy now when you showed me how to think. :joy: :joy:

Thank you!

1 Like