英文:
Transition duration not being homogeneous
问题
我正在制作一个小游戏，其中一个球在屏幕上移动，使用样式.top = Math.random()以及样式.left也是如此。然而，当我指定过渡持续时间时，起初它会非常快速地加速，然后移动到指定位置，然后会非常缓慢地减速。我希望球的速度在整个移动过程中保持一致。
有任何想法吗？我正在寻找一种属性来实现这一点。
英文:
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
答案1
得分: 1
听起来你在询问过渡时间函数。更改你使用的函数将改变时间曲线（从慢到快，从快到慢等）。
你可能会想要使用 linear 函数，因为它具有恒定的变化速率。
这是Mozilla关于它的文档链接：https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function
英文:
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
答案2
得分: 0
以下是代码部分的中文翻译：
<h2>示例 1</h2>
在此示例中，每当球碰到屏幕边缘时，它都会改变方向（请查看注释）。
<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-js -->
var ball = document.getElementById("ball");
var frameRate = 60;
// 设置球的初始位置
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";
// 设置球的初始方向和速度
var directionX = 1; // 向右为1，向左为-1
var directionY = 1; // 向下为1，向上为-1
var speedX = 2; // 根据需要调整速度
var speedY = 2; // 根据需要调整速度
const updateBallPosition = () => {
// 计算球的新位置
var newTop = currentTop + speedY * directionY;
var newLeft = currentLeft + speedX * directionX;
// 检查球是否碰到屏幕边界
var maxHeight = window.innerHeight - ball.offsetHeight;
var maxWidth = window.innerWidth - ball.offsetWidth;
// 如果球碰到了顶部/底部或左侧/右侧，则改变方向
newTop < 0 || newTop > maxHeight ? directionY *= -1 : newLeft < 0 || newLeft > maxWidth ? directionX *= -1 : "";
// 更新球的位置
ball.style.top = newTop + "px";
ball.style.left = newLeft + "px";
// 更新当前位置
currentTop = newTop;
currentLeft = newLeft;
// 调用下一帧
requestAnimationFrame(updateBallPosition);
}
// 启动动画
updateBallPosition();
<!-- 语言：lang-css -->
#ball {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ff6384;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
<!-- 语言：lang-html -->
<div id="ball"></div>
<!-- 结束代码片段 -->
<h2>示例 2</h2>
在此示例中，球的移动受到屏幕的限制，方向随机改变。当球到达屏幕的顶部或底部时，沿Y轴的方向将被反转。同样，当球到达屏幕的左侧或右侧边缘时，沿X轴的方向也会被反转（请查看注释）。
<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-js -->
var ball = document.getElementById("ball");
var frameRate = 60;
var changeDirectionInterval = 2000;
var minSpeed = 0.5; // 调整最小速度
var maxSpeed = 3; // 调整最大速度
// 设置球的初始位置
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";
// 设置球的初始方向和速度
var directionX = Math.random() > 0.5 ? 1 : -1; // 随机设置初始X方向
var directionY = Math.random() > 0.5 ? 1 : -1; // 随机设置初始Y方向
var speedX = Math.random() * (maxSpeed - minSpeed) + minSpeed;
var speedY = Math.random() * (maxSpeed - minSpeed) + minSpeed;
const updateBallPosition = () => {
// 计算球的新位置
var newTop = currentTop + speedY * directionY;
var newLeft = currentLeft + speedX * directionX;
// 检查球是否碰到屏幕边界
var maxHeight = window.innerHeight - ball.offsetHeight;
var maxWidth = window.innerWidth - ball.offsetWidth;
// 检查球是否沿Y轴越界
if (newTop < 0) {
directionY = 1; // 向上反转方向
newTop = 0; // 保持球在顶部边界内
} else if (newTop > maxHeight) {
directionY = -1; // 向下反转方向
newTop = maxHeight; // 保持球在底部边界内
}
// 检查球是否沿X轴越界
if (newLeft < 0) {
directionX = 1; // 向右反转方向
newLeft = 0; // 保持球在左边界内
} else if (newLeft > maxWidth) {
directionX = -1; // 向左反转方向
newLeft = maxWidth; // 保持球在右边界内
}
// 更新球的位置
ball.style.top = newTop + "px";
ball.style.left = newLeft + "px";
// 检查是否改变方向的时间到了
if (Math.random() < frameRate / changeDirectionInterval) {
// 随机改变X轴方向
directionX = Math.random() > 0.5 ? 1 : -1;
// 随机改变Y轴方向
directionY = Math.random() > 0.5 ? 1 : -1;
}
// 更新当前位置
currentTop = newTop;
currentLeft = newLeft;
// 调用下一帧
requestAnimationFrame(updateBallPosition);
}
// 启动动画
updateBallPosition();
<!-- 语言：lang-css -->
#ball {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ff6384;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
<!-- 语言：lang-html -->
<div id="ball"></
<details>
<summary>英文:</summary>
<h2>Example 1</h2>
In this example, the ball changes directions whenever it hits the border of the screen (Check the comments).
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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();
<!-- language: lang-css -->
#ball {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ff6384;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
<!-- language: lang-html -->
<div id="ball"></div>
<!-- end snippet -->
<h2>Example 2</h2>
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).
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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();
<!-- language: lang-css -->
#ball {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ff6384;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
<!-- language: lang-html -->
<div id="ball"></div>
<!-- end snippet -->
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论