主页 / 问题 / 1270189
Accepted
Sevastopol'
Asked:2022-04-14 22:17:13 +0000 UTC2022-04-14 22:17:13 +0000 UTC

在两个方向上单击即可沿贝塞尔曲线移动元素

  • 772

有两个点 (A和B) 和一条从一个点到另一个点的贝塞尔曲线。当点击一个点时A，我们开始animateMotion动画元素沿着移动路径从一个点移动到另一个A点B。

<svg id="svg" width="500" height="300" viewBox="15 15 150 50">

  <circle id="a" cx="26.5" cy="13.2" r="4" fill="cornflowerblue" cursor="pointer"></circle>
  <circle id="b" cx="87.3" cy="23.8" r="4" fill="cornflowerblue" cursor="pointer"></circle>
  
  <text y="15" x="18" fill="cornflowerblue" stroke="none" stroke-width="0.1" font-size="6px">A</text>
  <text y="26" x="92" fill="cornflowerblue" stroke="none" stroke-width="0.1" font-size="6px">B</text>

  <path d="m 26.458333,13.229167 c 2.776366,16.871891 9.790064,18.199908 18.520833,13.229166 L 63.499999,13.229167 C 77.382834,4.1082137 88.663388,0.52362484 87.312499,23.8125 v 0" stroke="cornflowerblue" stroke-width="1" fill="none" id="mPath"></path>
  
  <circle id="c" cx="" cy="" r="2" fill="green">
    <animateMotion begin="a.click" dur="1.5s" repeatCount="1" fill="freeze">
      <mpath xlink:href="#mPath"></mpath>
    </animateMotion>
  </circle>
  
</svg>

问题：如何实现一个附加动画，即点击一个点时，B启动元素沿着移动路径从一个点B到另一个点移动的动画A？为了不混淆，我更详细地解释了这个问题：

  1. 当点击一个点时A，我们开始动画元素沿着移动路径从一个点移动到另一个A点B。
  2. 当点击一个点时B，我们开始动画元素沿着移动路径从一个点移动到另一个B点A。
  3. 这不是逆转。这不是一次往返。两个动画都是独立的，彼此不相关。它们仅通过path点之间的路径 ( ) 连接。

在这方面，出现了一个相当可预测的问题：如果它们有一个路径（ ），那么对于从点到点path的动画，是否需要另外添加相同的路径？但是，如果现有的已经有一个起点，一个终点，一个线段，并且所有这些都是从一个点到另一个点，那么如何绘制相同的路径（时间不与坐标迷路？BAABpath

有兴趣通过问题标签中指示的任何方式和技术详细描述此类实现和实现本身，这可以是 and CSS, and SMIL SVG, 以及使用 and JavaScript。

javascript

1 个回答

  1. Best Answer

    但是，如果现有的已经有一个起点，一个终点，一个线段，而这一切都是从A点到B点，那么如何绘制相同的路径（路径），使其指向相反的方向，以及同时不会跟坐标迷路？

    А=>В您可以从和从绘制两条路径В=>А，这将是最简单的解决方案，只有它们需要从不同的起点绘制А和B

    默认情况下，沿路径的动画animateMotion始终从起点开始
    <path d="M"..

    但是有一种更简单的方法可以改变运动的开始，不是从起点，而是从终点到起点：keyPoints="1;0.5;0" keyTimes="0;0.5;1"在零时间，keyTimes="0运动从终点开始 keyPoints="1

    使用此知识，您可以将两个动画挂在一个对象上 А=>В，并从В=>А一个对象沿同一路径挂起。每个动画都将通过单击相应的圆圈来触发。

    <svg id="svg" width="500" height="300" viewBox="15 15 150 50">

  <circle id="a" cx="26.5" cy="13.2" r="4" fill="cornflowerblue" cursor="pointer"></circle>
  <circle id="b" cx="87.3" cy="23.8" r="4" fill="cornflowerblue" cursor="pointer"></circle>
  
  <text y="15" x="18" fill="cornflowerblue" stroke="none" stroke-width="0.1" font-size="6px">A</text>
  <text y="26" x="92" fill="cornflowerblue" stroke="none" stroke-width="0.1" font-size="6px">B</text>

  <path d="m 26.458333,13.229167 c 2.776366,16.871891 9.790064,18.199908 18.520833,13.229166 L 63.499999,13.229167 C 77.382834,4.1082137 88.663388,0.52362484 87.312499,23.8125 v 0" stroke="cornflowerblue" stroke-width="1" fill="none" id="mPath"></path>
  
  <circle id="c" cx="" cy="" r="2" fill="green" pointer-events="none">
        <!-- Анимация из пункта А в пункт В    -->   
   <animateMotion begin="a.click" dur="1.5s" repeatCount="1" fill="freeze">
      <mpath xlink:href="#mPath"></mpath>
    </animateMotion>  
          <!-- Анимация из пункта В в пункт А    --> 
      <animateMotion begin="b.click" dur="1.5s" repeatCount="1" fill="freeze" keyPoints="1;0.5;0" keyTimes="0;0.5;1" calcMode="linear">
      <mpath xlink:href="#mPath"></mpath>
    </animateMotion>
  </circle>
  
</svg>

    在下面的示例中，有两个对象：一个绿色球和一个红色球，它们沿着相同的路径移动，但分别通过单击不同的起点А和В

    <svg id="svg" width="500" height="300" viewBox="15 15 150 50">

  <circle  id="a" cx="26.5" cy="13.2" r="4" fill="cornflowerblue" cursor="pointer"></circle>
  <circle  id="b" cx="87.3" cy="23.8" r="4" fill="cornflowerblue" cursor="pointer"></circle>
  
  <text y="15" x="18" fill="cornflowerblue" stroke="none" stroke-width="0.1" font-size="6px">A</text>
  <text y="26" x="92" fill="cornflowerblue" stroke="none" stroke-width="0.1" font-size="6px">B</text>

  <path d="m 26.458333,13.229167 c 2.776366,16.871891 9.790064,18.199908 18.520833,13.229166 L 63.499999,13.229167 C 77.382834,4.1082137 88.663388,0.52362484 87.312499,23.8125 v 0" stroke="cornflowerblue" stroke-width="1" fill="none" id="mPath"></path>
    
        <!-- Анимация из пункта А в пункт В    -->
  <circle id="c" cx="" cy="" r="4" fill="green" pointer-events="none">
    <animateMotion begin="a.click" dur="1.5s" repeatCount="1" fill="freeze">
      <mpath xlink:href="#mPath"></mpath>
    </animateMotion>  
   </circle>    
             <!-- Анимация из пункта В в пункт А    -->
     <circle id="e" cx="" cy="" r="4" fill="red" pointer-events="none">
      <animateMotion begin="b.click" dur="1.5s" repeatCount="1" fill="freeze" keyPoints="1;0.5;0" keyTimes="0;0.5;1" calcMode="linear">
      <mpath xlink:href="#mPath"></mpath>
    </animateMotion>
  </circle>
  
</svg>

    • 3

相关问题