How to animate a tennis ball to bounce off a horizontal surface

Question

I have an image of a tennis ball:

It is necessary to make an animation of a ball falling with subsequent bounces from a solid surface.

I got this kind of animation, but it doesn't look realistic:

To start the animation, click on the image:

It is necessary that the first bounce was less than the height of the fall of the ball, the second bounce was less than the height of the first bounce, the third bounce was less than the second.

How do you achieve this? Solution maybe on SMIL SVG, CSS, JS

SMIL SVG solution is preferred.

user_1292848 · Answer

The most realistic approach would be to simulate the physics with JS.

Something like this:

let ballElem = document.getElementById("ball");

let GRAVITY = 40;        // Acceleration due to gravity (pixels / sec /sec)
let FLOOR_Y = 200 - 25;  // Y coord of floor. The 25 here is because ball.y is the top of the ball.
let BOUNCINESS = 0.8;    // Velocity retained after a bounce
let LIMIT = 0.1;         // Minimum velocity required to keep animation running
let ball = {};
let lastFrameTime = null;

ballElem.addEventListener("click", startAnim);


function startAnim()
{
  ball = {x: 82, y: 0, dx: 0, dy: 0};
  lastFrameTime = null;
  requestAnimationFrame(animStep);
}


function animStep(timestamp)
{
  if (lastFrameTime === null)
    lastFrameTime = timestamp;
  // Milliseconds elapsed since last step
  const elapsed = timestamp - lastFrameTime;
  lastFrameTime = timestamp;
  
  ball.dy += GRAVITY * elapsed / 1000;
  ball.y += ball.dy;
  ball.x += ball.dx;   // not really used in this example

  if (ball.y > FLOOR_Y) {
    // Step has taken us below the floor, so we need to rebound the ball.
    ball.y -= (ball.y - FLOOR_Y);
    ball.dy = -ball.dy * BOUNCINESS;
  }
  
  // Update the  element x and y
  ballElem.x.baseVal.value = ball.x;
  ballElem.y.baseVal.value = ball.y;
  
  // Request another animation step
  if (Math.abs(ball.y - FLOOR_Y) > LIMIT ||  // Not on ground
      Math.abs(ball.dy) > LIMIT ||           // or still moving
      Math.abs(ball.dx) > LIMIT) {
    requestAnimationFrame(animStep);
  }
}

user_7394871 · Answer

SVG SMIL Solution

The variable amount of ball bounce can be set in the values = "" attribute of the animateTransform animation command.

The speed of the ball at each time slot can be controlled using the values of the keyTimes attribute.

restart = "whenNotActive" - protection from restarting the animation until it has completely finished.

The animation will start after clicking

Looping animation example

For this, the following condition is written in the animation start condition:
begin = "svg1.click; anT.end + 1s", where

svg1.click- the first start of the animation after a click
anT.end + 1s - restart the animation in 1 second, after the end of the animation with id = "anT"

How to animate a tennis ball to bounce off a horizontal surface

2 Answers