如何在运动路径上有效地反转SVG(SMIL)动画? [英] How to efficiently reverse SVG (SMIL) Animation on Motion Path?

问题描述

我正在尝试确定如何有效地反转此SVG动画(使用SMIL)，该动画在 path 上使用 animateMotion 和 d 属性元素.我需要动画围绕形状逆时针旋转.

当前动画可以在此处找到，相关代码如下.

  document.getElementById("svgobject").pauseAnimations();  

 < svg版本="1.1" id ="svgobject" xmlns ="http://www.w3.org/2000/svg"xmlns:xlink =" http://www.w3.org/1999/xlink"x =" 0px"y =" 0px"width =" 451.5px"height =" 451.5px"viewBox =" 0 0 461.5 461.5"enable-background ="new 0 0 461.5 461.5" xml:space ="preserve">< g>< path fill ="none" stroke ="black"d ="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333，446.85,249.891,446.85,280.187L446.85,280.187z"/>< rect id ="rect" x ="0" y ="0" width ="50" height ="20" fill =灰色" stroke ="black" stroke-width ="1" transform ="translate(-25，-10)>< animateMotion path ="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187zbegin ="0s" dur ="2s" repeatCount ="1" rotation ="auto" fill ="freeze"/></rect></g><！-开始​​和停止动画->< g onclick ="document.getElementById('svgobject').unpauseAnimations()"transform ="translate(160100)">< rect width ="60" height ="30" rx ="10" stroke ="black" fill-opacity ="0.2"/>< text style ="font:16px Arial黑色；填充:白色；笔触:黑色；"transform ="translate(2 20)"> START</text></g>< g onclick ="document.getElementById('svgobject').pauseAnimations()"transform ="translate(260 100)">< rect width ="60" height ="30" rx ="10" stroke ="black" fill-opacity ="0.2"/>< text style ="font:16px Arial黑色；填充:白色；笔触:黑色；"transform ="translate(5 20)"> STOP</text></g></svg>  

我了解我可以手动反转SVG路径数据命令，包括moveto(M，m)，lineto(L，l)，curveto(C，c)等.

鉴于我需要反转的路径坐标数量(除了此动画中的坐标之外)，我试图确定是否有更有效的方法来实现此目的.

解决方案

您可以使用 keyPoints 和 keyTimes 属性来反转动画的方向.

 < animateMotion path ="..." begin ="0s" dur ="2s" repeatCount ="1" rotation ="auto"fill ="freeze" keyPoints ="1; 0" keyTimes ="0; 1"> 

在这里，我们告诉运动从1(路径的结束)到0(路径的开始)运行.

这在Firefox中有效，但不幸的是在Chrome中不起作用.Chrome似乎有问题.

更新:

我发现与此有关的Chrome错误: https://code.google.com/p/chromium/issues/detail?id = 353108

如果calcMode为"paced"(默认为paced)，则keyTimes似乎已损坏.如果将其更改为其他内容，例如线性:动画也可以在Chrome浏览器中正常工作.

 < animateMotion path ="..." begin ="0s" dur ="2s" repeatCount ="1" rotation ="auto"fill ="freeze" keyPoints ="1; 0" keyTimes ="0; 1" calcMode ="linear"> 

此处演示

此处更新了Codepen

I am trying to determine how to efficiently reverse this SVG animation (with SMIL) which uses animateMotion and the d attribute on the path element. I need the animation to run counterclockwise around the shape.

The current animation can be found here and the relevant code is as follows.

document.getElementById("svgobject").pauseAnimations();

<svg version="1.1" id="svgobject" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="451.5px" height="451.5px" viewBox="0 0 461.5 461.5" enable-background="new 0 0 461.5 461.5" xml:space="preserve">
  <g>
    <path fill="none" stroke="black"
          d="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187z"/>
    <rect id="rect" x="0" y="0" width="50" height="20" fill="gray" stroke="black" stroke-width="1" transform="translate(-25, -10)">
      <animateMotion path="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187z"
        begin= "0s" dur="2s" repeatCount="1" rotate="auto" fill="freeze" />
    </rect>
  </g>

  <!--start and stop animation-->
  <g onclick="document.getElementById('svgobject').unpauseAnimations()"
     transform="translate(160 100)">
    <rect width="60" height="30" rx="10" stroke="black" fill-opacity="0.2"/>
    <text style="font: 16px Arial Black; fill: white; stroke: black;"
          transform="translate(2 20)">START</text>
  </g>
  <g onclick="document.getElementById('svgobject').pauseAnimations()"
     transform="translate(260 100)">
    <rect width="60" height="30" rx="10" stroke="black" fill-opacity="0.2"/>
    <text style="font: 16px Arial Black; fill: white; stroke: black;"
          transform="translate(5 20)">STOP</text>
  </g>
</svg>

I understand that I can manually reverse the SVG path data commands including moveto (M,m), lineto (L,l), curveto (C,c), etc.

Given the amount of path coordinates that I'll need to reverse (in addition to those in this animation), I'm trying to determine if there is a more efficient way to do this.

解决方案

You can reverse the direction of your animation by using the keyPoints and keyTimes attributes.

<animateMotion path="..." begin= "0s" dur="2s" repeatCount="1" rotate="auto"
               fill="freeze" keyPoints="1;0" keyTimes="0;1">

Here we are telling the motion to run from 1 (end of the path) to 0 (start of the path).

This works in Firefox, but unfortunately not in Chrome. It seems Chrome is bugged.

Update:

I found the Chrome bug related to this: https://code.google.com/p/chromium/issues/detail?id=353108

It seems keyTimes is broken if the calcMode is "paced" (which it defaults to). If you change it to something else, like "linear: the animation works correctly in Chrome also.

<animateMotion path="..." begin= "0s" dur="2s" repeatCount="1" rotate="auto"
               fill="freeze" keyPoints="1;0" keyTimes="0;1" calcMode="linear">

Demo here

Updated Codepen here

这篇关于如何在运动路径上有效地反转SVG(SMIL)动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！