过渡持续时间不均匀。

huangapple
go评论101阅读模式
英文:

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

以下是代码部分的中文翻译：

  1. <h2>示例 1</h2>
  3. 在此示例中，每当球碰到屏幕边缘时，它都会改变方向（请查看注释）。
  5. <!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
  7. <!-- 语言：lang-js -->
  8. var ball = document.getElementById("ball");
  9. var frameRate = 60;
  11. // 设置球的初始位置
  12. var currentTop = Math.random() * (window.innerHeight - ball.offsetHeight);
  13. var currentLeft = Math.random() * (window.innerWidth - ball.offsetWidth);
  14. ball.style.top = currentTop + "px";
  15. ball.style.left = currentLeft + "px";
  17. // 设置球的初始方向和速度
  18. var directionX = 1; // 向右为1，向左为-1
  19. var directionY = 1; // 向下为1，向上为-1
  20. var speedX = 2; // 根据需要调整速度
  21. var speedY = 2; // 根据需要调整速度
  23. const updateBallPosition = () => {
  24.   // 计算球的新位置
  25.   var newTop = currentTop + speedY * directionY;
  26.   var newLeft = currentLeft + speedX * directionX;
  28.   // 检查球是否碰到屏幕边界
  29.   var maxHeight = window.innerHeight - ball.offsetHeight;
  30.   var maxWidth = window.innerWidth - ball.offsetWidth;
  32.   // 如果球碰到了顶部/底部或左侧/右侧，则改变方向
  33.   newTop < 0 || newTop > maxHeight ? directionY *= -1 : newLeft < 0 || newLeft > maxWidth ? directionX *= -1 : "";
  35.   // 更新球的位置
  36.   ball.style.top = newTop + "px";
  37.   ball.style.left = newLeft + "px";
  39.   // 更新当前位置
  40.   currentTop = newTop;
  41.   currentLeft = newLeft;
  43.   // 调用下一帧
  44.   requestAnimationFrame(updateBallPosition);
  45. }
  47. // 启动动画
  48. updateBallPosition();
  50. <!-- 语言：lang-css -->
  51. #ball {
  52.   position: absolute;
  53.   width: 50px;
  54.   height: 50px;
  55.   border-radius: 50%;
  56.   background-color: #ff6384;
  57.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  58. }
  60. <!-- 语言：lang-html -->
  61. <div id="ball"></div>
  63. <!-- 结束代码片段 -->
  1. <h2>示例 2</h2>
  3. 在此示例中，球的移动受到屏幕的限制，方向随机改变。当球到达屏幕的顶部或底部时，沿Y轴的方向将被反转。同样，当球到达屏幕的左侧或右侧边缘时，沿X轴的方向也会被反转（请查看注释）。
  5. <!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
  7. <!-- 语言：lang-js -->
  8. var ball = document.getElementById("ball");
  9. var frameRate = 60;
  10. var changeDirectionInterval = 2000;
  12. var minSpeed = 0.5; // 调整最小速度
  13. var maxSpeed = 3; // 调整最大速度
  15. // 设置球的初始位置
  16. var currentTop = Math.random() * (window.innerHeight - ball.offsetHeight);
  17. var currentLeft = Math.random() * (window.innerWidth - ball.offsetWidth);
  18. ball.style.top = currentTop + "px";
  19. ball.style.left = currentLeft + "px";
  21. // 设置球的初始方向和速度
  22. var directionX = Math.random() > 0.5 ? 1 : -1; // 随机设置初始X方向
  23. var directionY = Math.random() > 0.5 ? 1 : -1; // 随机设置初始Y方向
  24. var speedX = Math.random() * (maxSpeed - minSpeed) + minSpeed;
  25. var speedY = Math.random() * (maxSpeed - minSpeed) + minSpeed;
  27. const updateBallPosition = () => {
  28.   // 计算球的新位置
  29.   var newTop = currentTop + speedY * directionY;
  30.   var newLeft = currentLeft + speedX * directionX;
  32.   // 检查球是否碰到屏幕边界
  33.   var maxHeight = window.innerHeight - ball.offsetHeight;
  34.   var maxWidth = window.innerWidth - ball.offsetWidth;
  36.   // 检查球是否沿Y轴越界
  37.   if (newTop < 0) {
  38.     directionY = 1; // 向上反转方向
  39.     newTop = 0; // 保持球在顶部边界内
  40.   } else if (newTop > maxHeight) {
  41.     directionY = -1; // 向下反转方向
  42.     newTop = maxHeight; // 保持球在底部边界内
  43.   }
  45.   // 检查球是否沿X轴越界
  46.   if (newLeft < 0) {
  47.     directionX = 1; // 向右反转方向
  48.     newLeft = 0; // 保持球在左边界内
  49.   } else if (newLeft > maxWidth) {
  50.     directionX = -1; // 向左反转方向
  51.     newLeft = maxWidth; // 保持球在右边界内
  52.   }
  54.   // 更新球的位置
  55.   ball.style.top = newTop + "px";
  56.   ball.style.left = newLeft + "px";
  58.   // 检查是否改变方向的时间到了
  59.   if (Math.random() < frameRate / changeDirectionInterval) {
  60.     // 随机改变X轴方向
  61.     directionX = Math.random() > 0.5 ? 1 : -1;
  63.     // 随机改变Y轴方向
  64.     directionY = Math.random() > 0.5 ? 1 : -1;
  65.   }
  67.   // 更新当前位置
  68.   currentTop = newTop;
  69.   currentLeft = newLeft;
  71.   // 调用下一帧
  72.   requestAnimationFrame(updateBallPosition);
  73. }
  75. // 启动动画
  76. updateBallPosition();
  78. <!-- 语言：lang-css -->
  79. #ball {
  80.   position: absolute;
  81.   width: 50px;
  82.   height: 50px;
  83.   border-radius: 50%;
  84.   background-color: #ff6384;
  85.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  86. }
  88. <!-- 语言：lang-html -->
  89. <div id="ball"></
  91. <details>
  92. <summary>英文:</summary>
  94. &lt;h2&gt;Example 1&lt;/h2&gt;
  96. In this example, the ball changes directions whenever it hits the border of the screen (Check the comments).
  98. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  100. &lt;!-- language: lang-js --&gt;
  102.     var ball = document.getElementById(&quot;ball&quot;);
  103.     var frameRate = 60;
  105.     // Set the initial position of the ball
  106.     var currentTop = Math.random() * (window.innerHeight - ball.offsetHeight);
  107.     var currentLeft = Math.random() * (window.innerWidth - ball.offsetWidth);
  108.     ball.style.top = currentTop + &quot;px&quot;;
  109.     ball.style.left = currentLeft + &quot;px&quot;;
  111.     // Set the initial direction and speed of the ball
  112.     var directionX = 1; // 1 for right, -1 for left
  113.     var directionY = 1; // 1 for down, -1 for up
  114.     var speedX = 2; // Adjust the speed as desired
  115.     var speedY = 2; // Adjust the speed as desired
  117.     const updateBallPosition = () =&gt; {
  118.       // Calculate the new position of the ball
  119.       var newTop = currentTop + speedY * directionY;
  120.       var newLeft = currentLeft + speedX * directionX;
  122.       // Check if the ball hits the screen boundaries
  123.       var maxHeight = window.innerHeight - ball.offsetHeight;
  124.       var maxWidth = window.innerWidth - ball.offsetWidth;
  125.       
  126.       // Reverse the direction if the ball hits the top/bottom or left/right
  127.       newTop &lt; 0 || newTop &gt; maxHeight ? directionY *= -1 : newLeft &lt; 0 || newLeft &gt; maxWidth ? directionX *= -1 : &quot;&quot;;
  129.       // Update the position of the ball
  130.       ball.style.top = newTop + &quot;px&quot;;
  131.       ball.style.left = newLeft + &quot;px&quot;;
  133.       // Update the current position
  134.       currentTop = newTop;
  135.       currentLeft = newLeft;
  137.       // Call the next frame
  138.       requestAnimationFrame(updateBallPosition);
  139.     }
  141.     // Start the animation
  142.     updateBallPosition();
  144. &lt;!-- language: lang-css --&gt;
  146.     #ball {
  147.       position: absolute;
  148.       width: 50px;
  149.       height: 50px;
  150.       border-radius: 50%;
  151.       background-color: #ff6384;
  152.       box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  153.     }
  155. &lt;!-- language: lang-html --&gt;
  157.     &lt;div id=&quot;ball&quot;&gt;&lt;/div&gt;
  159. &lt;!-- end snippet --&gt;
  162. &lt;h2&gt;Example 2&lt;/h2&gt;
  164. In this example, the ball&#39;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).
  166. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  168. &lt;!-- language: lang-js --&gt;
  170.     var ball = document.getElementById(&quot;ball&quot;);
  171.     var frameRate = 60; 
  172.     var changeDirectionInterval = 2000; 
  174.     var minSpeed = 0.5; // Adjust the minimum speed
  175.     var maxSpeed = 3; // Adjust the maximum speed
  177.     // Set the initial position of the ball
  178.     var currentTop = Math.random() * (window.innerHeight - ball.offsetHeight);
  179.     var currentLeft = Math.random() * (window.innerWidth - ball.offsetWidth);
  180.     ball.style.top = currentTop + &quot;px&quot;;
  181.     ball.style.left = currentLeft + &quot;px&quot;;
  183.     // Set the initial direction and speed of the ball
  184.     var directionX = Math.random() &gt; 0.5 ? 1 : -1; // Randomly set initial X direction
  185.     var directionY = Math.random() &gt; 0.5 ? 1 : -1; // Randomly set initial Y direction
  186.     var speedX = Math.random() * (maxSpeed - minSpeed) + minSpeed;
  187.     var speedY = Math.random() * (maxSpeed - minSpeed) + minSpeed;
  189.     const updateBallPosition = () =&gt; {
  190.       // Calculate the new position of the ball
  191.       var newTop = currentTop + speedY * directionY;
  192.       var newLeft = currentLeft + speedX * directionX;
  194.       // Check if the ball hits the screen boundaries
  195.       var maxHeight = window.innerHeight - ball.offsetHeight;
  196.       var maxWidth = window.innerWidth - ball.offsetWidth;
  198.       // Check if the ball is going out of bounds along the Y-axis
  199.       if (newTop &lt; 0) {
  200.         directionY = 1; // Reverse the direction upward
  201.         newTop = 0; // Keep the ball within the top boundary
  202.       } else if (newTop &gt; maxHeight) {
  203.         directionY = -1; // Reverse the direction downward
  204.         newTop = maxHeight; // Keep the ball within the bottom boundary
  205.       }
  207.       // Check if the ball is going out of bounds along the X-axis
  208.       if (newLeft &lt; 0) {
  209.         directionX = 1; // Reverse the direction towards the right
  210.         newLeft = 0; // Keep the ball within the left boundary
  211.       } else if (newLeft &gt; maxWidth) {
  212.         directionX = -1; // Reverse the direction towards the left
  213.         newLeft = maxWidth; // Keep the ball within the right boundary
  214.       }
  216.       // Update the position of the ball
  217.       ball.style.top = newTop + &quot;px&quot;;
  218.       ball.style.left = newLeft + &quot;px&quot;;
  220.       // Check if it&#39;s time to change direction
  221.       if (Math.random() &lt; frameRate / changeDirectionInterval) {
  222.         // Randomly change direction along the X-axis
  223.         directionX = Math.random() &gt; 0.5 ? 1 : -1;
  225.         // Randomly change direction along the Y-axis
  226.         directionY = Math.random() &gt; 0.5 ? 1 : -1;
  227.       }
  229.       // Update the current position
  230.       currentTop = newTop;
  231.       currentLeft = newLeft;
  233.       // Call the next frame
  234.       requestAnimationFrame(updateBallPosition);
  235.     }
  237.     // Start the animation
  238.     updateBallPosition();
  240. &lt;!-- language: lang-css --&gt;
  242.     #ball {
  243.       position: absolute;
  244.       width: 50px;
  245.       height: 50px;
  246.       border-radius: 50%;
  247.       background-color: #ff6384;
  248.       box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  249.     }
  251. &lt;!-- language: lang-html --&gt;
  253.     &lt;div id=&quot;ball&quot;&gt;&lt;/div&gt;
  255. &lt;!-- end snippet --&gt;
  259. </details>

huangapple
  • 本文由 发表于 2023年6月8日 06:55:36
  • 转载请务必保留本文链接：https://go.coder-hub.com/76427579.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定