Help image growth up to X size, then shrink back to 0 on tap

Hello!

So I just discovered that for some reason the Weather Icon complication has no opacity field :frowning: so in order to have it in my current project I’d need an alternate way to animate it when it appears and disappears. I suppose the best way would be to make it grow up to X size, and then shrink to nothing; this must happen on “tap” (when a variable is increased/toggled).

I have tried to play around with this for a while now but I can never manage to make it stay a certain size until I click the variable again, it either keeps growing/shrinking, or kind of “breathing”/pulsing…

If anyone has any other better ideas to make the weather icon appear and disappear similar to opacity, I’m all ears! Otherwise thanks a ton in advance to anyone who might be able to help me out with this expression!

1 Like

This is a basic version of what you are looking for but if you only what to be on then off remember you can use the x and y coordinate to place the image off screen at say -900 and return to its proper place when viewed

$(#DNOW#-#VAR_1_T#)<2000?(160+300*(1-#VAR_1#)-(1-2*#VAR_1#)*(interpAccelDecel((#DNOW#-#VAR_1_T#),0,2000)*300)):(160+#VAR_1#*300)$

this code works nicely with activate to a point then press to return

2 Likes

Thank you! I’ll give it a try in the morning!

Tested it, and it seems perfect!
Could I bother you with an explanation as to what is happening in there? I want to be able to manipulate the time it takes to grow/shrink, as well as (and most importantly) the size of 100% shrinked and 100% grown, but not really sure what to mess with, without breaking it xD

Thanks a lot already, but also in advance o/

Ok

$(DNOW#-VAR_1_T#)<2000 = The time taken to complete the task

(x+y*(1-VAR_1#)-(1-2*VAR_1#) X Starting position Y Total amount to move each time so 0 + 100 would be starting at 0 and growing to 100 then waiting till next press and reversing 100 shrinking to 0

(interpAccelDecel((#DNOW#-#VAR_1_T#),0,2000 [SPEED Control] )*y))

y same as before total movement each time

(x+#VAR_1#*y)$ This is the final resting place of the item so it can wait for the next press

hope this helps

3 Likes

It does! I had figured out the speed control, and some of the numbers but not all exactly xD That’s a huge help, thanks a ton!

no problem

1 Like

Oh of idle curiosity were would one place this code ?

1 Like

Personally I’m using it in the width and height fields of an element (copy paste of the string). I haven’t tried using it in the position fields but I imagine it could work too? :stuck_out_tongue:

2 Likes

Would this also work for an image ?

Don’t see why not.

1 Like

This formula is very powerful and variable when used wisely. With some modified values you can move, rotate and/or resize items or control transparency. It should be combined with a toggle var. I already used it for some very impressive user controlled animations.

I confirm @GAUSS !
I have still in mind the Gauss-Airlock :wink:
Rotation, flip, transparency … a lot of acrobatics there!

1 Like

Oh, that‘s a good example. It was, after a test project, the first one where i used a couple of variation. All animations are only done with one VAR-Toggle.