主页 / 问题 / 1267323
Accepted
Sevastopol'
Asked:2022-04-07 23:58:55 +0000 UTC2022-04-07 23:58:55 +0000 UTC

球沿给定轨迹运动的动画

  • 772

我在隧道的开头有以下球代码：

body {
  margin: 0; padding: 0; min-height: 100vh;
  display: flex; align-items: center;
}

.container {
  width: 100%; height: 160px;
  background: #fbf2d4;
}

.ball {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #f48024;
}
<div class="container">
  <div class="ball"></div>
</div>

可以通过什么手段和技术来实现小球沿给定轨迹在某个隧道内运动的动画，如下图所示？

球沿给定轨迹的动画

需要播放此动画。但是，在这样做之前，您需要了解为什么要开始以应用所选技术的必要手段。这是否是球移动的给定轨迹。或者它是一个从上下墙壁反弹的飞球。对于答案，这个选择无关紧要。最重要的是创建此类动画效果的实现及其详细说明。

javascript

4 个回答

  1. Best Answer

    带有控制按钮的 AnimateMotion 变体

    在我看来，最困难的事情是创建一个逐像素的轨迹，就像问题中的图片一样，所以我会更详细地讨论它。

    • 创建一个 SVG 文件以加载到矢量编辑器中：

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="900" height="133" viewBox="0 0 900 133" preserveAspectRatio="xMinYMin meet"  >  
<image xlink:href="https://isstatic.askoverflow.dev/NAFqM.png" width="100%" height="100%" />
</svg>

    • 接下来，沿着图中的运动轨迹，我们使用工具“绘制贝塞尔曲线 -Shift + F6

    在此处输入图像描述

    • 保存文件*.svg
    • 我们path从文件中复制，这里将是命令中的运动轨迹<mpath>

    <mpath xlink:href="#trace" />

    • 接下来，我们编写animateMotion小球运动的动画命令

    一键forward- 一个动作，只前进

    var animation1 = document.getElementById("forward")
function forwardSVG(){
     animation1.beginElement();
}
    <div id="Container">
        <button id="btn1" onclick="forwardSVG()">forward</button />
        
</div>  

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="25 4 900 190" preserveAspectRatio="xMinYMin meet" style="background:#FEF2D4;"> 

<defs>
<path id="trace" stroke="blue" fill="none" d="m0 31c0 0 22.6 3.9 31.9 10.1 15.8 10.6 25.6 28.4 36.6 44 10 14.2 15.4 31.4 26.5 44.7 9.5 11.4 19.9 23.3 33.5 29.2 10 4.4 23.2 5.6 32.7 3.5 13.8-3 25.8-12.6 35.8-22.6 14.1-14.1 23.6-35.1 31.9-50.6 7.1-13.1 17.1-26.5 25.7-36.6 8-9.4 19.9-15.7 31.9-18.7 11.3-2.8 24.2-2.9 35 1.6 15.1 6.2 25.9 20.4 36.2 33.1 10.5 13 16.1 29.2 25.3 43.2 6.5 9.9 13.3 20.1 21 28.8 7.1 8.1 16.4 14.8 26.5 18.7 8.3 3.2 17.6 4.2 26.5 3.1 9.9-1.3 19.8-5.1 28-10.9 9.8-6.9 16.3-17.6 23.3-27.2 7.8-10.6 13.8-22.4 21-33.5 7.2-11.1 13.5-23 22.2-33.1 5.9-6.8 12-13.9 19.8-18.3 8.5-4.7 18.3-7.8 28-7.8 11.3 0 23 3.4 32.7 9.3 10.2 6.3 17.2 16.9 24.5 26.5 9 11.8 15.5 25.2 23.3 37.7 5.5 8.7 10 18.2 16.7 26.1 8.1 9.4 16.9 19 28 24.5 9.7 4.8 21.1 7.6 31.9 6.6 11.5-1.1 22.6-6.5 31.9-13.2 7.7-5.6 13.1-14 18.7-21.8 5.1-7.1 8.7-15.1 13.2-22.6 6.4-10.6 12.4-21.4 19.4-31.5 4.6-6.6 9.2-13.3 14.8-19.1 5.9-6.1 11.9-12.4 19.4-16.3C881.7 33.8 900 31 900 31M0 163.5" />
</defs>
<image xlink:href="https://isstatic.askoverflow.dev/NAFqM.png" width="100%" height="100%" />  
<circle class="circle2" cx="0" cy="0" r="12" fill="#F48024" >
                     
     <animateMotion
       id="forward"
       dur="4s"
       begin="indefinite"
       repeatCount="1"
       keyPoints="0;1"
       keyTimes="0;1"
       calcMode="linear"
       restart="whenNotActive">
         <mpath xlink:href="#trace" />
     </animateMotion> 
      
        </svg>

    几个按钮，，，forward-向前，从中间，middle向后back

    var animation1 = document.getElementById("forward")
function forwardSVG(){
     animation1.beginElement();
} 
var animation2 = document.getElementById("middle")
function middleSVG(){
     animation2.beginElement();
}  

var animation3 = document.getElementById("back")
function backSVG(){
     animation3.beginElement();
}
    <div id="pathContainer4">
        <button id="btn1" onclick="forwardSVG()">forward</button />
        <button id="btn2" onclick="middleSVG()">Middle</button />
        <button id="btn3" onclick="backSVG()">Back</button />
</div>  

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="25 4 900 190" preserveAspectRatio="xMinYMin meet" style="background:#FEF2D4;">   

<defs>
<path id="trace" stroke="blue" fill="none" d="m0 31c0 0 22.6 3.9 31.9 10.1 15.8 10.6 25.6 28.4 36.6 44 10 14.2 15.4 31.4 26.5 44.7 9.5 11.4 19.9 23.3 33.5 29.2 10 4.4 23.2 5.6 32.7 3.5 13.8-3 25.8-12.6 35.8-22.6 14.1-14.1 23.6-35.1 31.9-50.6 7.1-13.1 17.1-26.5 25.7-36.6 8-9.4 19.9-15.7 31.9-18.7 11.3-2.8 24.2-2.9 35 1.6 15.1 6.2 25.9 20.4 36.2 33.1 10.5 13 16.1 29.2 25.3 43.2 6.5 9.9 13.3 20.1 21 28.8 7.1 8.1 16.4 14.8 26.5 18.7 8.3 3.2 17.6 4.2 26.5 3.1 9.9-1.3 19.8-5.1 28-10.9 9.8-6.9 16.3-17.6 23.3-27.2 7.8-10.6 13.8-22.4 21-33.5 7.2-11.1 13.5-23 22.2-33.1 5.9-6.8 12-13.9 19.8-18.3 8.5-4.7 18.3-7.8 28-7.8 11.3 0 23 3.4 32.7 9.3 10.2 6.3 17.2 16.9 24.5 26.5 9 11.8 15.5 25.2 23.3 37.7 5.5 8.7 10 18.2 16.7 26.1 8.1 9.4 16.9 19 28 24.5 9.7 4.8 21.1 7.6 31.9 6.6 11.5-1.1 22.6-6.5 31.9-13.2 7.7-5.6 13.1-14 18.7-21.8 5.1-7.1 8.7-15.1 13.2-22.6 6.4-10.6 12.4-21.4 19.4-31.5 4.6-6.6 9.2-13.3 14.8-19.1 5.9-6.1 11.9-12.4 19.4-16.3C881.7 33.8 900 31 900 31M0 163.5" />
</defs>
<image xlink:href="https://isstatic.askoverflow.dev/NAFqM.png" width="100%" height="100%" />  
<circle class="circle2" cx="0" cy="0" r="12" fill="#F48024" >
                     
     <animateMotion
       id="forward"
       dur="4s"
       begin="indefinite"
       repeatCount="1"
       keyPoints="0;1"
       keyTimes="0;1"
       calcMode="linear">
         <mpath xlink:href="#trace" />
     </animateMotion> 
        
         <animateMotion
       id="middle"
       dur="4s"
       begin="indefinite"
       repeatCount="1"
       keyPoints="0.5;1"
       keyTimes="0;1"
       calcMode="linear"
       rotate="auto">
         <mpath xlink:href="#trace" />
     </animateMotion>         

          <animateMotion
           id="back"
           dur="4s"
           begin="indefinite"
           repeatCount="1"
           keyPoints="1;0"
           keyTimes="0;1"
           calcMode="linear">
         <mpath xlink:href="#trace" />
        </animateMotion>
         </circle>
        </svg>

    带有PNG图像的变体

    位图也可以在 SVG 中进行动画处理。

    取而代之circle的是，拍摄网球的位图图像。

    在此处输入图像描述

    var animation1 = document.getElementById("forward")
function forwardSVG(){
     animation1.beginElement();
} 
var animation2 = document.getElementById("middle")
function middleSVG(){
     animation2.beginElement();
}  

var animation3 = document.getElementById("back")
function backSVG(){
     animation3.beginElement();
}
    <style>
body {
margin:0;
padding:0;
background:#84AF98;
}
.container {
width:90vw;
height:90vh;
}
</style>
<div id="pathContainer4">
        <button id="btn1" onclick="forwardSVG()">forward</button />
        <button id="btn2" onclick="middleSVG()">Middle</button />
        <button id="btn3" onclick="backSVG()">Back</button />
</div>  

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="25 4 900 190" preserveAspectRatio="xMinYMin meet" style="background:#FEF2D4;">    

<defs>
<path id="trace" stroke="blue" fill="none" d="m0 31c0 0 22.6 3.9 31.9 10.1 15.8 10.6 25.6 28.4 36.6 44 10 14.2 15.4 31.4 26.5 44.7 9.5 11.4 19.9 23.3 33.5 29.2 10 4.4 23.2 5.6 32.7 3.5 13.8-3 25.8-12.6 35.8-22.6 14.1-14.1 23.6-35.1 31.9-50.6 7.1-13.1 17.1-26.5 25.7-36.6 8-9.4 19.9-15.7 31.9-18.7 11.3-2.8 24.2-2.9 35 1.6 15.1 6.2 25.9 20.4 36.2 33.1 10.5 13 16.1 29.2 25.3 43.2 6.5 9.9 13.3 20.1 21 28.8 7.1 8.1 16.4 14.8 26.5 18.7 8.3 3.2 17.6 4.2 26.5 3.1 9.9-1.3 19.8-5.1 28-10.9 9.8-6.9 16.3-17.6 23.3-27.2 7.8-10.6 13.8-22.4 21-33.5 7.2-11.1 13.5-23 22.2-33.1 5.9-6.8 12-13.9 19.8-18.3 8.5-4.7 18.3-7.8 28-7.8 11.3 0 23 3.4 32.7 9.3 10.2 6.3 17.2 16.9 24.5 26.5 9 11.8 15.5 25.2 23.3 37.7 5.5 8.7 10 18.2 16.7 26.1 8.1 9.4 16.9 19 28 24.5 9.7 4.8 21.1 7.6 31.9 6.6 11.5-1.1 22.6-6.5 31.9-13.2 7.7-5.6 13.1-14 18.7-21.8 5.1-7.1 8.7-15.1 13.2-22.6 6.4-10.6 12.4-21.4 19.4-31.5 4.6-6.6 9.2-13.3 14.8-19.1 5.9-6.1 11.9-12.4 19.4-16.3C881.7 33.8 900 31 900 31M0 163.5" />
</defs>
<image xlink:href="https://isstatic.askoverflow.dev/NAFqM.png" width="100%" height="100%" />  
<image xlink:href="https://isstatic.askoverflow.dev/muZHy.png" x="2" y="-20" width="35px" height="35px" >
                     
     <animateMotion
       id="forward"
       dur="6s"
       begin="indefinite"
       repeatCount="1"
       keyPoints="0;1"
       keyTimes="0;1"
     calcMode="linear"
       rotate="auto">
         <mpath xlink:href="#trace" />
     </animateMotion> 
        
         <animateMotion
       id="middle"
       dur="6s"
       begin="indefinite"
       repeatCount="1"
       keyPoints="0.5;1"
       keyTimes="0;1"
     calcMode="linear"
     rotate="auto">
         <mpath xlink:href="#trace" />
     </animateMotion>         

          <animateMotion
           id="back"
           dur="6s"
           begin="indefinite"
           repeatCount="1"
           keyPoints="1;0"
           keyTimes="0;1"
           calcMode="linear"
       rotate="auto">
         <mpath xlink:href="#trace" />
        </animateMotion>
         </image>
        </svg>

    • 8

  2. 使用 JavaScript 更改绝对位置值的选项：

    let container = document.querySelector(".container");
let ball = document.querySelector(".ball");

let maxX = container.clientWidth - ball.offsetWidth;
let maxY = container.clientHeight - ball.offsetHeight;

let size = 30;
let start = null;
let duration = 1;

function step(timestamp) {
  let progress, x, y;
  if (start === null) start = timestamp;

  progress = (timestamp - start) / duration / 2000;

  x = progress * maxX / size;
  y = 2 * Math.sin(x);

  ball.style.left = Math.min(maxX, size * x) + "px";
  ball.style.top = maxY / 2 + (size * y) + "px";

  if (progress >= 1) start = null;
  requestAnimationFrame(step);
}
requestAnimationFrame(step);
    body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
}

.container {
  position: relative;
  width: 100%;
  height: 160px;
  background: #fbf2d4;
  border: 1px solid #f1e5bc;
}

.ball {
  position: absolute;
  left: 0;
  top: calc(50% - 20px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f48024;
}
    <div class="container">
  <div class="ball"></div>
</div>

    让我们添加第二个球：

    let container = document.querySelector(".container");
let ball = document.querySelector(".ball");
let ball2 = document.querySelector(".ball2");

let maxX = container.clientWidth - ball.offsetWidth;
let maxY = container.clientHeight - ball.offsetHeight;

let size = 30;
let start = null;
let duration = 1;

function step(timestamp) {
  let progress, x, y, y2;
  if (start === null) start = timestamp;

  progress = (timestamp - start) / duration / 4000;

  x = progress * maxX / size;
  y = 2 * Math.sin(x);
  y2 = 2 * Math.cos(x);

  ball.style.left = ball2.style.left = Math.min(maxX, size * x) + "px";
  ball.style.top = maxY / 2 + (size * y) + "px";
  ball2.style.top = maxY / 2 + (size * y2) + "px";

  if (progress >= 1) start = null;
  requestAnimationFrame(step);
}
requestAnimationFrame(step);
    body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
}

.container {
  position: relative;
  width: 100%;
  height: 160px;
  background: #fbf2d4;
  border: 1px solid #f1e5bc;
}

.ball,
.ball2 {
  position: absolute;
  left: 0;
  top: calc(50% - 20px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.ball {
  background: #f48024;
}

.ball2 {
  background: #bcbbbb;
}
    <div class="container">
  <div class="ball"></div>
  <div class="ball2"></div>
</div>

    • 7

  3. 两个球

    添加第二个球时，您将需要第二个path运动轨迹。
    为此，在矢量编辑器中，复制第一个球的第一个路径并垂直翻转副本：

    在此处输入图像描述

    在代码中，所有内容都是双倍数量：2 条球运动路径，2 个开始按钮：

    var animation1 = document.getElementById("forward1")
function forwardSVG(){
     animation1.beginElement();
} 
var animation2 = document.getElementById("forward2")
function forwardSVG2(){
     animation2.beginElement();
}
    <style>
body {
margin:0;
padding:0;
background:#84AF98;
}
.container {
width:90vw;
height:90vh;
}
</style>

<div id="pathContainer">
        <button id="btn1" onclick="forwardSVG()">forward1</button />
        <button id="btn2" onclick="forwardSVG2()">forward2</button />
        
</div>  
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
         viewBox="25 4 900 190" preserveAspectRatio="xMinYMin meet" style="background:#FEF2D4;">  


   <path id="traceTop" stroke="yellowgreen" stroke-width="3" fill="none" d="m0 31c0 0 22.6 3.9 31.9 10.1 15.8 10.6 25.6 28.4 36.6 44 10 14.2 15.4 31.4 26.5 44.7 9.5 11.4 19.9 23.3 33.5 29.2 10 4.4 23.2 5.6 32.7 3.5 13.8-3 25.8-12.6 35.8-22.6 14.1-14.1 23.6-35.1 31.9-50.6 7.1-13.1 17.1-26.5 25.7-36.6 8-9.4 19.9-15.7 31.9-18.7 11.3-2.8 24.2-2.9 35 1.6 15.1 6.2 25.9 20.4 36.2 33.1 10.5 13 16.1 29.2 25.3 43.2 6.5 9.9 13.3 20.1 21 28.8 7.1 8.1 16.4 14.8 26.5 18.7 8.3 3.2 17.6 4.2 26.5 3.1 9.9-1.3 19.8-5.1 28-10.9 9.8-6.9 16.3-17.6 23.3-27.2 7.8-10.6 13.8-22.4 21-33.5 7.2-11.1 13.5-23 22.2-33.1 5.9-6.8 12-13.9 19.8-18.3 8.5-4.7 18.3-7.8 28-7.8 11.3 0 23 3.4 32.7 9.3 10.2 6.3 17.2 16.9 24.5 26.5 9 11.8 15.5 25.2 23.3 37.7 5.5 8.7 10 18.2 16.7 26.1 8.1 9.4 16.9 19 28 24.5 9.7 4.8 21.1 7.6 31.9 6.6 11.5-1.1 22.6-6.5 31.9-13.2 7.7-5.6 13.1-14 18.7-21.8 5.1-7.1 8.7-15.1 13.2-22.6 6.4-10.6 12.4-21.4 19.4-31.5 4.6-6.6 9.2-13.3 14.8-19.1 5.9-6.1 11.9-12.4 19.4-16.3C881.7 33.8 900 31 900 31M0 163.5" />
<image xlink:href="https://isstatic.askoverflow.dev/muZHy.png" x="2" y="-20" width="35px" height="35px" >
                     
     <animateMotion
       id="forward1"
       dur="6s"
       begin="indefinite"
       repeatCount="1"
       keyPoints="0;1"
       keyTimes="0;1"
       calcMode="linear"
       rotate="auto">
         <mpath xlink:href="#traceTop" />
     </animateMotion> 
        
    </image>  
    <path id="traceBottom" fill="none" stroke="crimson" stroke-width="3" d="m0 163.5c0 0 22.6-3.9 31.9-10.1 15.8-10.6 25.6-28.4 36.6-44 9.9-14.1 15.3-31.4 26.4-44.7 9.5-11.4 19.9-23.3 33.5-29.2 10-4.4 23.2-5.6 32.7-3.5 13.8 3 25.8 12.6 35.8 22.6 14.1 14.1 23.6 35.1 31.9 50.6 7.1 13.1 17.1 26.5 25.7 36.6 8 9.4 19.9 15.7 31.9 18.7 11.3 2.8 24.2 2.9 35-1.6 15.1-6.2 25.9-20.4 36.2-33.1 10.5-13 16.1-29.2 25.3-43.2 6.5-9.9 13.3-20.1 21-28.8 7.1-8.1 16.4-14.8 26.5-18.7 8.3-3.2 17.6-4.2 26.5-3.1 9.9 1.3 19.8 5.1 28 10.9 9.8 6.9 16.3 17.6 23.3 27.2 7.8 10.6 13.8 22.4 21 33.5 7.2 11.1 13.5 23 22.2 33.1 5.9 6.8 12 13.9 19.8 18.3 8.5 4.7 18.3 7.8 28 7.8 11.3 0 23-3.4 32.7-9.3 10.2-6.3 17.2-16.9 24.5-26.5 9-11.8 15.5-25.2 23.3-37.7 5.5-8.7 10-18.2 16.7-26.1 8.1-9.4 16.9-19 28-24.5 9.7-4.8 21.1-7.6 31.9-6.6 11.5 1.1 22.6 6.5 31.9 13.2 7.7 5.6 13.1 14 18.7 21.8 5.1 7.1 8.7 15.1 13.2 22.6 6.4 10.6 12.4 21.4 19.4 31.5 4.6 6.6 9.2 13.3 14.8 19.1 5.9 6.1 11.9 12.4 19.4 16.3 8.1 4.2 26.3 7 26.3 7" /> 
    
    <image xlink:href="https://isstatic.askoverflow.dev/WoB43.png" x="2" y="-20" width="35px" height="35px" >
                     
     <animateMotion
       id="forward2"
       dur="6s"
       begin="indefinite"
       repeatCount="1"
       keyPoints="0;1"
       keyTimes="0;1"
       calcMode="linear"
       rotate="auto">
         <mpath xlink:href="#traceBottom" />
     </animateMotion> 
        
    </image> 
</svg>
        
  </div>

    • 4

  4. 试图做类似的事情，只适用于 Chromium 浏览器。

    --leftPercent--topPercent这是浏览器屏幕上圆圈的位置。
    0 - 开始，100 - 结束

    *, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --colorCircle: white;
}

body {
  margin: 0;
}

.holst {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
}

.holst::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--colorCircle);
  filter: invert();
}

@property --leftPercent {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

@property --topPercent {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

.circle {
  --size: 20vmin;
  --leftPercent: 0;
  --topPercent: 0;
  --left: calc( 100vw - var(--size));
  --leftTotal: calc( var(--left) * var(--leftPercent) / 100 );
  --top: calc( 100vh - var(--size));
  --topTotal: calc( var(--top) * var(--topPercent) / 100 );
  position: absolute;
  top: 0px;
  left: 0px;
  width: var(--size);
  height: var(--size);
  background-color: var(--colorCircle);
  border-radius: 50%;
  border: 4px solid orange;
  transform: translateX(var(--leftTotal)) translateY(var(--topTotal));
  animation: animCircleX 4s infinite alternate linear,
             animCircleY 1s infinite alternate ease-in-out;
}

@keyframes animCircleX {
  0% {
    --leftPercent: 0;
  }
  100% {
    --leftPercent: 100;
  }
}

@keyframes animCircleY {
  0% {
    --topPercent: 0;
  }
  100% {
    --topPercent: 100;
  }
}
    <div class="holst">
  <div class="circle"></div>
</div>

    • 3

相关问题