Question 184301 in CSS Question posted in
Some basic documentation can be found here.

Css – Transition duration not being homogeneous

Im working on a small game where a ball moves over the screen, using style.top = Math.random() and the same with style.left. However, when I specify the transition duration, at first it accelerates really quickly, and then moves to the specified place, and then really slowly slows down. I want the speed of the ball be the same throughout the whole movement.

Any ideas? Im looking for some sort of property to achieve this

Tags:

2

Answers


  1. 0

    It sounds like you’re asking about transition timing functions. Changing which function you use will change the timing curve (slow to fast, fast to slow, etc).

    You’re probably going to want the linear function, since that has a constant rate of change.

    Here’s the Mozilla documentation on it: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

    Login or Signup to reply.
  2. 0

    Example 1

    In this example, the ball changes directions whenever it hits the border of the screen (Check the comments).

    var ball = document.getElementById("ball");
var frameRate = 60;

// Set the initial position of the ball
var currentTop = Math.random() * (window.innerHeight - ball.offsetHeight);
var currentLeft = Math.random() * (window.innerWidth - ball.offsetWidth);
ball.style.top = currentTop + "px";
ball.style.left = currentLeft + "px";

// Set the initial direction and speed of the ball
var directionX = 1; // 1 for right, -1 for left
var directionY = 1; // 1 for down, -1 for up
var speedX = 2; // Adjust the speed as desired
var speedY = 2; // Adjust the speed as desired

const updateBallPosition = () => {
  // Calculate the new position of the ball
  var newTop = currentTop + speedY * directionY;
  var newLeft = currentLeft + speedX * directionX;

  // Check if the ball hits the screen boundaries
  var maxHeight = window.innerHeight - ball.offsetHeight;
  var maxWidth = window.innerWidth - ball.offsetWidth;
  
  // Reverse the direction if the ball hits the top/bottom or left/right
  newTop < 0 || newTop > maxHeight ? directionY *= -1 : newLeft < 0 || newLeft > maxWidth ? directionX *= -1 : "";

  // Update the position of the ball
  ball.style.top = newTop + "px";
  ball.style.left = newLeft + "px";

  // Update the current position
  currentTop = newTop;
  currentLeft = newLeft;

  // Call the next frame
  requestAnimationFrame(updateBallPosition);
}

// Start the animation
updateBallPosition();
    #ball {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ff6384;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
    <div id="ball"></div>

    Example 2

    In this example, the ball’s movement is restricted within the screen, changing direction randomly. When the ball reaches the top or bottom of the screen, the direction along the Y-axis is reversed. Similarly, when the ball reaches the left or right edge of the screen, the direction along the X-axis is reversed (Check the comments).

    var ball = document.getElementById("ball");
var frameRate = 60; 
var changeDirectionInterval = 2000; 

var minSpeed = 0.5; // Adjust the minimum speed
var maxSpeed = 3; // Adjust the maximum speed

// Set the initial position of the ball
var currentTop = Math.random() * (window.innerHeight - ball.offsetHeight);
var currentLeft = Math.random() * (window.innerWidth - ball.offsetWidth);
ball.style.top = currentTop + "px";
ball.style.left = currentLeft + "px";

// Set the initial direction and speed of the ball
var directionX = Math.random() > 0.5 ? 1 : -1; // Randomly set initial X direction
var directionY = Math.random() > 0.5 ? 1 : -1; // Randomly set initial Y direction
var speedX = Math.random() * (maxSpeed - minSpeed) + minSpeed;
var speedY = Math.random() * (maxSpeed - minSpeed) + minSpeed;

const updateBallPosition = () => {
  // Calculate the new position of the ball
  var newTop = currentTop + speedY * directionY;
  var newLeft = currentLeft + speedX * directionX;

  // Check if the ball hits the screen boundaries
  var maxHeight = window.innerHeight - ball.offsetHeight;
  var maxWidth = window.innerWidth - ball.offsetWidth;

  // Check if the ball is going out of bounds along the Y-axis
  if (newTop < 0) {
    directionY = 1; // Reverse the direction upward
    newTop = 0; // Keep the ball within the top boundary
  } else if (newTop > maxHeight) {
    directionY = -1; // Reverse the direction downward
    newTop = maxHeight; // Keep the ball within the bottom boundary
  }

  // Check if the ball is going out of bounds along the X-axis
  if (newLeft < 0) {
    directionX = 1; // Reverse the direction towards the right
    newLeft = 0; // Keep the ball within the left boundary
  } else if (newLeft > maxWidth) {
    directionX = -1; // Reverse the direction towards the left
    newLeft = maxWidth; // Keep the ball within the right boundary
  }

  // Update the position of the ball
  ball.style.top = newTop + "px";
  ball.style.left = newLeft + "px";

  // Check if it's time to change direction
  if (Math.random() < frameRate / changeDirectionInterval) {
    // Randomly change direction along the X-axis
    directionX = Math.random() > 0.5 ? 1 : -1;

    // Randomly change direction along the Y-axis
    directionY = Math.random() > 0.5 ? 1 : -1;
  }

  // Update the current position
  currentTop = newTop;
  currentLeft = newLeft;

  // Call the next frame
  requestAnimationFrame(updateBallPosition);
}

// Start the animation
updateBallPosition();
    #ball {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ff6384;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
    <div id="ball"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search