Animating a ball with physics

Animation
1

Hey everyone! I just started with Hype Pro yesterday and loving it - thanks to everyone in the forums, reading the questions and answers here really helped me get started.

One thing I wasn’t able to find an answer to was how to animate a ball with physics. Essentially, I have a ball with dynamic physics from the start, and I was able to get it so that you can click on the ball to make it move, but I can’t figure out how to do two things:

  1. Animate the ball from wherever it lands, instead of from a fixed location. I used a simple motion path animation but this doesn’t work because the ball starts animating from the same place every time, and not from wherever the balls ends up based on physics
  2. Animate in the opposite direction of where the user clicks the ball (clicking the bottom of the ball animates it up, clicking the right side animates it left)

A small 3rd problem I had is that I made static walls on the bottom, left and right, but the left/right ones don’t seem to be working and for the life of me I can’t figure out why…

Here’s a simple demo: Ball Click Example.zip (18.9 KB)

2

If you make any animation exist set to be a 'relative' timeline instead of an absolute timeline, this will make the ball animate from its dropped location to where the end point in your timeline is set. This will make at least that part smoother. (Absolute timelines are the default, but you can adjust that in the scene inspector in the Animation Timelines Relative checkbox).

Screen Shot 2017-10-06 at 5.01.10 PM.png528×840 50.3 KB

This part is a bit trickier, but the basic thing I would do is use the Get / Set Hype API function to animate movement of the ball. Here's an example using rotation, but the workflow is the same: Rotation: fraction of a degree possible? - #2 by Daniel

You would get the ball's position, then animate to a new position based on the click position. This would all require quite a bit of JavaScript. It's pretty easy to get the X and Y coordinates of the mouse click, but the element manipulation will be a bit tricker. The Physics part complicates things, since Physics doesn't really take effect until after an animation has completed. So If you animate the ball to go up and to the right, it will continue on its path after the animation duration automatically. To make it look more natural, use linear movement for X, and easein easing properties for Y animations.

2 Likes