在 svg 路径更改后再次执行动画

Posted

技术标签:

【中文标题】在 svg 路径更改后再次执行动画【英文标题】:Make animate execute again after svg path changes 【发布时间】:2022-01-24 05:40:04 【问题描述】:

我想为 svg 路径设置动画,使动画只运行一次,但是如果 d 值发生变化,那么动画应该再次运行一次。每次路径值更改时我都无法让动画运行,如果我将 repeatCount 值设置为 1,它在 svg 值更改和 svg“重新渲染”后将不会再次运行。我在下面包含了一些代码,这些代码复制了我正在尝试做的事情,感谢任何帮助。这是一个只有动画的代码演示,没有反应:https://codepen.io/shak8/pen/RwLLjNm

const SVGAnimate = () =>
    const [width, setWidth] = useState(213)
    const [prevWidth, setPrevWidth] = useState(213)
    return (
      <div>
         <svg  >
           <path  style="stroke-width:3;stroke:rgb(0,0,0)"
            fill="black"
            d=`M 0 212 S 226 212, $width 20 V 212 H 0`>
    
              <animate 
                attributeName="d"
                dur="5s"
                from=`M 0 212 S 226 212,$prevWidth 20 V 212 H 0`
                to=`M 0 212 S 226 212, $width 20 V 212 H 0`

                repeatCount="1"
                fill="black"
                />
            </path>
            <button onClick=() => 
                                      // These should trigger svg path to change, desired
                                      // effect is for path to change with animation.
                                      setPrevWidth(width == width)
                                      setWidth(width == 213 ? 320 : 213)
                                   
            > Change</button>
      </div>
    )

我也尝试在路径上使用过渡,它在 chrome 上完美运行,但在 safari 上不起作用。

【问题讨论】:

【参考方案1】:

你可以使用onClick="animation.beginElement()"

作为观察:您有一个动画的 fill="black" 属性。我想你的意思是填充=“冻结”。这将冻结动画,类似于 animation-fill-mode: forwards。

<div>
         <svg  >
           <path  style="stroke-width:3;stroke:rgb(0,0,0)"
            fill="black"
            d="M 0 212 S 226 212, 100 20 V 212 H 0">
    
              <animate id="animation"
                attributeName="d"
                dur="5s"
                from="M 0 212 S 226 212,100 20 V 212 H 0"
                to="M 0 212 S 226 212, 300 20 V 212 H 0"

                repeatCount="1"
                fill="freeze"
                />
            </path>
   </svg>
            <button onClick="animation.beginElement()"> Change</button>
      </div>

【讨论】:

谢谢,如何在 react 函数或 useEffect 中调用 animation.beginElement() 函数? 最终使用了 react refs 并为 animate 标签提供了一个 ref。这允许我调用 beginElement 函数。 ***.com/questions/48179124/…这个q很有用

以上是关于在 svg 路径更改后再次执行动画的主要内容,如果未能解决你的问题,请参考以下文章

css 过渡动画不适用于 svg 路径的“d”属性更改

加载窗口时在路径上设置 SVG 动画

使用 css 动画 svg 路径填充

动画后 SVG 路径发生变化

在 SVG 路径动画中为 SVG 设置动画

[CSS] svg路径动画