A way to slow down and to stop animation on a click?

Animation
1

I have in mind the creation of a page to turn a wheel of fortune … and of course i need a button to stop the wheel when i want it … Today my stop is damn sharp (stop timeline) and it “brakes the charm” of seeing the speed of the wheel decreasing slowly and finally stop…

any idea to make me happy ?

Best Regards,
Phil

1 Like
2

Can you post an example project , saves us recreating one to test some ideas.

3

help me where to post the whole project … zip format ?

4

Yes zip it and drop the zip into a post ( needs to be under 3MB )

5

.zip file 1,4Mo blind roue - copie.hype.zip (1.4 MB)

the cross button will stop the wheel … the return button will relaunch … i am searching a way to smooth the “stop”

thank you

6

There are threads that suggest you duplicate the timeline and run it at a different time scale.
This works to a small extent but it has problems.
My way and a bit simpler is:

Using a bit of Javascript.

We get the current rotation of the elements with the hypeDocument.getElementProperty() API

We then + or - it respectively and use the hypeDocument.setElementProperty() API to rotate the elements. We set a duration to the time it takes to go from where it is to where we want.

One plus with is is you get a slight random stop.

blind roue - copieMHv1.hype.zip (1.4 MB)

7

thank you mark i have seen the result, its a good way to slow down and stop, but can we do something for the brutal change of speed in the arrow position it may seems not so natural if you understand what i mean …

8

Its a matter of matching the spin speed to the duration

Try these ,

var markerTo =  Number(markerRot) - 400;
var musiquerTo =  Number(musiquerRot) + 2000;

blind roue - copieMHv2.hype.zip (1.4 MB)

maybe also increase the marker duration from 6 to 8 seconds

9

Mark ! all the best ! your solution is very good thank you so much

1 Like