RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1298880
Accepted
De.Minov
De.Minov
Asked:2022-06-25 14:13:19 +0000 UTC2022-06-25 14:13:19 +0000 UTC 2022-06-25 14:13:19 +0000 UTC

animateMotion 更快

  • 772

我animateMotion在 SVG 中使用路径动画。

粉红色的圆圈移动一个圆圈,白色的圆圈移动一个半圆形。
它们的速度、关键帧等都是一样的,但是有一个具体的区别——粉色圆圈的动画是倒置的,使用属性keyPoints="1;0" keyTimes="0;1"(偷看SO)。

问题在于,在 FF 中一切都按预期运行(期望的结果),但在 Chrome 和 Opera 中存在一个错误,即粉红色圆圈的移动速度比应有的快。
我的猜测是,这是由于动画反转时关键帧的变化引起的。

以下是其显示方式的示例:

火狐 歌剧和铬
法郎 ○

这是代码:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  background: #000;
  margin: 0;
}

svg {
  display: block;
}
<svg width="300" viewbox="0 0 200 200" style="background: rgba(255,0,0,.1)">
  <!-- circle big -->
  <g transform="rotate(-63 100 100)">
    <g>
      <defs>
       <path id="cb" d="M 100 190 A 1 1 0 0 1 100 10 A 1 1 0 0 1 100 190 Z" fill="none"/>
      </defs>
      <use xlink:href="#cb" stroke="white" stroke-width="4" stroke-dasharray="0 6" stroke-linecap="round" mask="url(#cbm)"/>
      <mask id="cbm">
        <rect x="0" y="0" width="100%" height="100%" fill="white"/>
        <use id="cba" xlink:href="#cb" stroke="black" stroke-width="5" stroke-dasharray="565.565" stroke-dashoffset="0"/>
        <animate xlink:href="#cba" attributeName="stroke-dashoffset" to="565.565" dur="1.5s" keySplines="0.33 1 0.68 1" calcMode="spline" fill="freeze"/>
      </mask>
    </g>

    <!-- Проблемное место -->
    <circle id="cbb" cx="0" cy="0" r="7" fill="#c4007b" filter="url(#blur)">
      <animateMotion dur="1.5s" restart="whenNotActive" fill="freeze" rotate="auto" keyPoints="1;0" keyTimes="0;1" keySplines="0.33 1 0.68 1" calcMode="spline"><mpath xlink:href="#cb"/></animateMotion>
    </circle>
    <!-- Проблемное место -->
    
    <defs>
      <filter id="blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation=".5" />
      </filter>
    </defs>
  </g>
  
  <!-- circle small -->
  <g transform="rotate(-50 100 100)">
    <!-- left -->
    <g stransform="rotate(45 100 100)">
      <path id="cs-l" d="M 100 35 A 1 1 0 0 0 100 165" fill="none" stroke="#fed485" stroke-width="3" stroke-dasharray="204.232" mask="url(#scbm)"/>
      <animate xlink:href="#cs-l" attributeName="stroke-dashoffset" from="204.232" to="0" dur="1.5s" keySplines="0.33 1 0.68 1" calcMode="spline" fill="freeze"/>
      <!--  -->
      <circle id="scb-l" cx="-6" cy="0" r="6" fill="white">
        <animateMotion dur="1.5s" restart="whenNotActive" fill="freeze" rotate="auto" keySplines="0.33 1 0.68 1" calcMode="spline"><mpath xlink:href="#cs-l"/></animateMotion>
      </circle>
      
      <mask id="scbm">
        <rect x="0" y="0" width="100%" height="100%" fill="white"/>
        <circle cx="106" cy="35" r="9" fill="black"/>
        <circle cx="-6" cy="0" r="9" fill="black">
          <animateMotion dur="1.5s" restart="whenNotActive" fill="freeze" rotate="auto" keySplines="0.33 1 0.68 1" calcMode="spline"><mpath xlink:href="#cs-l"/></animateMotion>
        </circle>
        <circle cx="94" cy="165" r="9" fill="black"/>
        <circle cx="-6" cy="0" r="9" fill="black">
          <animateMotion dur="1.5s" restart="whenNotActive" fill="freeze" rotate="auto" keySplines="0.33 1 0.68 1" calcMode="spline"><mpath xlink:href="#cs-r"/></animateMotion>
        </circle>
      </mask>
    </g>
    
    <!-- right -->
    <g stransform="rotate(45 100 100)">
      <path id="cs-r" d="M 100 165 A 1 1 0 0 0 100 35" fill="none" stroke="#fed485" stroke-width="3" stroke-dasharray="204.232" mask="url(#scbm)"/>
      <animate xlink:href="#cs-r" attributeName="stroke-dashoffset" from="204.232" to="0" dur="1.5s" keySplines="0.33 1 0.68 1" calcMode="spline" fill="freeze"/>
      <!--  -->
      <circle id="scb-r" cx="-6" cy="0" r="6" fill="white">
        <animateMotion dur="1.5s" restart="whenNotActive" fill="freeze" rotate="auto" keySplines="0.33 1 0.68 1" calcMode="spline"><mpath xlink:href="#cs-r"/></animateMotion>
      </circle>
    </g>
  </g>
</svg>

我用注释突出了有问题的地方,HTML 中的第 16 行

问题:
是什么原因造成的,如何解决?

有人告诉我,问题也可能出在路径本身,沿着它发生运动,反转它可能比粉色圆圈的运动更容易。

svg
  • 1 1 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    Alexandr_TT
    2022-06-26T02:16:41Z2022-06-26T02:16:41Z

    当反转行进方向与keyPoints="1;0" и keyTimes="0;1"Firefox 属性一起使用时,这很好。基于webkit
    引擎的浏览器:Chrome、Opera、Yandex、safari等在分享和属性时有bugcalcMode="spline"keyPoints="1;0" и keyTimes="0;1"

    您必须使用calcMode="linear",在这种情况下,动画将在所有浏览器中以相同的方式工作!

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-height: 100vh;
      background: #000;
      margin: 0;
    }
    
    svg {
      display: block;
    }
    <svg width="300" viewbox="0 0 200 200" style="background: rgba(255,0,0,.1)">
      <!-- circle big -->
      <g transform="rotate(-63 100 100)">
        <g>
          <defs>
           <path id="cb" d="M 100 190 A 1 1 0 0 1 100 10 A 1 1 0 0 1 100 190 Z" fill="none"/>
          </defs>
          <use xlink:href="#cb" stroke="white" stroke-width="4" stroke-dasharray="0 6" stroke-linecap="round" mask="url(#cbm)"/>
          <mask id="cbm">
            <rect x="0" y="0" width="100%" height="100%" fill="white"/>
            <use id="cba" xlink:href="#cb" stroke="black" stroke-width="5" stroke-dasharray="565.565" stroke-dashoffset="0"/>
            <animate xlink:href="#cba" attributeName="stroke-dashoffset" to="565.565" dur="1.5s" keySplines="0.33 1 0.68 1" calcMode="linear" fill="freeze"/>
          </mask>
        </g>
    
        <!-- Проблемное место -->
        <circle id="cbb" cx="0" cy="0" r="7" fill="#c4007b" filter="url(#blur)">
          <animateMotion dur="1.5s" restart="whenNotActive" fill="freeze" rotate="auto" keyPoints="1;0" keyTimes="0;1" keySplines="0.33 1 0.68 1" calcMode="linear"><mpath xlink:href="#cb"/></animateMotion>
        </circle>
        <!-- Проблемное место -->
        
        <defs>
          <filter id="blur">
            <feGaussianBlur in="SourceGraphic" stdDeviation=".5" />
          </filter>
        </defs>
      </g>
      
      <!-- circle small -->
      <g transform="rotate(-50 100 100)">
        <!-- left -->
        <g stransform="rotate(45 100 100)">
          <path id="cs-l" d="M 100 35 A 1 1 0 0 0 100 165" fill="none" stroke="#fed485" stroke-width="3" stroke-dasharray="204.232" mask="url(#scbm)"/>
          <animate xlink:href="#cs-l" attributeName="stroke-dashoffset" from="204.232" to="0" dur="1.5s" keySplines="0.33 1 0.68 1" calcMode="spline" fill="freeze"/>
          <!--  -->
          <circle id="scb-l" cx="-6" cy="0" r="6" fill="white">
            <animateMotion dur="1.5s" restart="whenNotActive" fill="freeze" rotate="auto" keySplines="0.33 1 0.68 1" calcMode="spline"><mpath xlink:href="#cs-l"/></animateMotion>
          </circle>
          
          <mask id="scbm">
            <rect x="0" y="0" width="100%" height="100%" fill="white"/>
            <circle cx="106" cy="35" r="9" fill="black"/>
            <circle cx="-6" cy="0" r="9" fill="black">
              <animateMotion dur="1.5s" restart="whenNotActive" fill="freeze" rotate="auto" keySplines="0.33 1 0.68 1" calcMode="spline"><mpath xlink:href="#cs-l"/></animateMotion>
            </circle>
            <circle cx="94" cy="165" r="9" fill="black"/>
            <circle cx="-6" cy="0" r="9" fill="black">
              <animateMotion dur="1.5s" restart="whenNotActive" fill="freeze" rotate="auto" keySplines="0.33 1 0.68 1" calcMode="spline"><mpath xlink:href="#cs-r"/></animateMotion>
            </circle>
          </mask>
        </g>
        
        <!-- right -->
        <g stransform="rotate(45 100 100)">
          <path id="cs-r" d="M 100 165 A 1 1 0 0 0 100 35" fill="none" stroke="#fed485" stroke-width="3" stroke-dasharray="204.232" mask="url(#scbm)"/>
          <animate xlink:href="#cs-r" attributeName="stroke-dashoffset" from="204.232" to="0" dur="1.5s" keySplines="0.33 1 0.68 1" calcMode="spline" fill="freeze"/>
          <!--  -->
          <circle id="scb-r" cx="-6" cy="0" r="6" fill="white">
            <animateMotion dur="1.5s" restart="whenNotActive" fill="freeze" rotate="auto" keySplines="0.33 1 0.68 1" calcMode="spline"><mpath xlink:href="#cs-r"/></animateMotion>
          </circle>
        </g>
      </g>
    </svg>

    • 4

相关问题

  • 字母S怎么画?

  • 在 svg 上绘制按钮

  • 将 viewBox 坐标转换为 svg 并将一个 svg 嵌入到另一个

  • 如何制作圆形箭头?

  • 如何消除 SVG 对象的大小限制不被模糊?

  • 为什么 SVG 不能在 iphone 上正确显示?

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    表格填充不起作用

    • 2 个回答
  • Marko Smith

    提示 50/50,有两个,其中一个是正确的

    • 1 个回答
  • Marko Smith

    在 PyQt5 中停止进程

    • 1 个回答
  • Marko Smith

    我的脚本不工作

    • 1 个回答
  • Marko Smith

    在文本文件中写入和读取列表

    • 2 个回答
  • Marko Smith

    如何像屏幕截图中那样并排排列这些块?

    • 1 个回答
  • Marko Smith

    确定文本文件中每一行的字符数

    • 2 个回答
  • Marko Smith

    将接口对象传递给 JAVA 构造函数

    • 1 个回答
  • Marko Smith

    正确更新数据库中的数据

    • 1 个回答
  • Marko Smith

    Python解析不是css

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5