内插和设置两个SVG路径的动画 [英] Interpolate and animate two svg path

问题描述

我有两个要设置动画的svg路径曲线。
我希望在5秒钟内 dPathBefore 变为 dPathNow 并具有平滑的动画过渡。

这是我的代码：

  const dPathBefore ='M 50350 Q 150 0 200 250 Q 250350300250C 350200450250400350 Z'
 const dPathNow ='M 50350C 50150150150250250300C 300150400150400350 Z'
 
导出类PathAnimation扩展了React.Component {
 render（）{
 return（
< svg width = {500} height = {400} className = {'ba b--black'} > 
<路径d = {dPathBefore} fill = {'cyan'} fillOpacity = {0.5} /> 
<路径d = {dPathNow} fill = {'red'} fillOpacity = {0.5} /> 
< / svg> 
）
} 
} 
  

我读了

结果对我来说不可接受。预计红色曲线将缓慢地变为蓝色曲线。两者之间应该有插值，以便对其进行动画处理。
我从未做过类似的事情，所以我不知道从哪里开始。

我对执行此操作没有任何偏好。我可以使用Javascript，CSS，SVG等...

感谢任何想帮助我的人

---

两个可能的路径是：

  M504,217.96837758046047L489.59781879350896,217.05585884731812L470 .86363307560316,214.2021740591243L455.24935650686257,209.88898669246805L442.67616275831006,204.52579180948993L432.5944768620284,198.43751290445206L424.4076807324568,191.85175297774788L417.62321391335945,184.92109353338404L411.87012300262165,177.7474756349613L406.876559933356,170.40012929754275L402.4429368598935,162.92731775668844L398.4201589437205,155.36378367845086L394 .693739903777,147.73548290048342L391.1725185650579,140.06266051775228L387.78055397450754,132.3619264061584L384.4510660137251,124.6477375137062L381.1215780529427,116.933548621254L377.72961346239236,109.2328145096601L374.2083921236733,101.55999212692899L370.4819730837299,93.93169134896155L366.4591951675568,86.36815727072396L362.0255720940944,78.89534572986962L357 .03200902482877,71.54 799939245105L351.278918114091,64.37438149402831L344.4944512949937,57.443722049664444L336.30765516542243,50.85796212296023L326.2259692691408,44.76968321792228L313.65277552058853,39.40648833494413L298.03849895184834,35.09330096828778L279.3043132339424,32.23961618009379L258.451066013725,31.2327292526072L237.59781879351084,32.23961618009349L218.8636330756046,35.09330096828717 L203.2493565068637,39.40648833494333L190.67616275831108,44.76968321792134L180.5944768620291,50.857962122959165L172.40768073245744,57.443722049663336L165.62321391335996,64.37438149402718L159.87012300262202,71.54799939244992L154.8765599333564,78.8953457298685L150.4429368598938,86.36815727072283L146.4201589437207,93.93169134896044L142.69373990377724,101.55999212692791 L139.1725185650581,109.23281450965906L135.7805539745077,116.93354862125298L132.4510660137253,124.64773751370521L129.12157805294288,132.36192640615744L125.72961346239249,140.06266051775137L122.2083921236734734,147.7354829004L825.481973 114.45919516755694,162.92731775668761L110.02557209409443,170.40012929754198L105.03200902482891,177.7474756349606L99.27891811409114,184.92109353338338L92.49445129499384,191.85175297774725L84.3076551654224,198.43751290445152L74.22596926914088,204.52579180948948L61.65277552058859,209.88898669246763L46.03849895184814,214.20217405912402L27.304313233942423,217.055858847318L6。 451066013724983,218.06274577480457L6.451066013724983,218.06274577480457L0,217.96837758046047L0,190.55329757211615L0,163.13821756377183L0,135.7231375554275L0,108.3080575470832L0,80.89297753873888L0,53.47789753039454L0,26.06281752205024L0，-1.3522624862941086L252，-1.3522624862941086L504，-1.3522624862941086L504,26.06281752205024L504,53.47789753039454 L504,80.89297753873888L504,108.3080575470832L504,135.7231375554275L504,163.13821756377183L504,190.5532975721161515 Z 
  

and：

  M0,198.47868323936274L4.927028427960408,206.02871397201466L11.93725138272032,213.71099149842013L22.2 0984708937999,221.034554053252L38.419917256266814,227.6527556580375L65.18825228558191,232.7633822265229L104.68485444720656,234.82977872657665L104.68485444720656,234.82977872657665L144.18145660882874,232.7633822265232L170.94979163814477,227.652755658038L187.15986180503202,221.03455405325258L197.4324575116921,213.71099149842075L204.4426804664522,206.02871397201534L209。 55669285362313,198.14571060477368L213.49875943621376,190.14123492852747L216.6785335463443,182.0587480265382L219.34296743530004,173.9239532585937L221.64982920279115,165.75306376812097L223.7054669341448,157.55691088670665L225.58541432472487,149.34313699247687L227.3463210486864,141.11744544980337L229.03330750837762,132.8843621970575L230.68485444720648,124.64773751370622L232。 33640138603536,116.41111283035495L234.02338784572657,108.17802957760907L235.7842945696881,99.9523380349356L237.6642419602681,91.7385641407058L239.71987969162174,83.54241125929147L242.02674145911286,75.37152176881874L244.69123534672,874 87094945819908,59.154240098884955L251.81301604078962,51.149764422638725L256.9270284279605,43.26676105539707L263.9372513827204,35.58448352899161L274.2098470893801,28.26092097415973L290.4199172562667,21.642719369374305L317.18825228558194,16.532092800888876L356.6848544472066,14.465696300835148L396.18145660882567,16.532092800888222L422.9497916381429,21.642719369373268L439。 15986180503097,28.26092097415861L449.4324575116914,35.58448352899036L456.4426804664517,43.26676105539579L461.55669285362274,51.1497644226374L465.4987594362135,59.15424009888365L468.67853354634417,67.23672700087295L471.3429674352999,75.37152176881747L473.64982920279107,83.54241125929025L475.70546693414474,91.73856414070463L477.58541432472487,99.95233803493443L479。 3463210486864,108.17802957760796L481.03330750837756,116.41111283035387L482.6848544472064,124.64773751370517L484.3364013860353,132.88436219705648L486.0233878457266,141.11744544980237L487.78429456968803,149.343136992475970179157886556760 796916217,165.75306376812011L494.0267414591128,173.92395325859286L496.69117534806855,182.05874802653742L499.87094945819905,190.14123492852673L503.8130160407896,198.145710604773L504,198.47868323936274L504,224.56321033751370.25579252537537547237525723752570.257392572375257937525472375257237522573752257375225737522573752257375225737522573752257过氧化过的作用$ c> 

但是创建它们的不是我，而是一个将它们返回给我的外部应用程序，并且它们之间可能会有很大差异。 p>


解决方案

路径的d属性必须具有相同的命令。我已经重写了您的路径，现在可以使用了。希望对您有所帮助。

  svg {border：1px solid; width：100vh}  

 < svg viewBox = 30 120 400250英寸< path d = M50.000，350.000 C116.667，116.667 166.667，83.333 200.000，250.000 C233.333，316.667 266.667，316.667 300.000，250.000 C350.000，200.000 450.000，250.000 400.000，350.000 Z> < animate dur ='5s'attributeType = XML attributeName ='d'repeatCount ='indefinite'values = M50.000，350.000 C116.667，116.667 166.667，83.333 200.000，250.000 C233.333，316.667 266.667，316.667 300.000，250.000 C350.000，200.000 450.000，250.000 400.000，350.000 Z; M50.000，350.000 C50.000，150.000 150.000，150.000 250.000，300.000 C300.000，150.000 400.000，150.000 400.000，349.999 C400.000，349.999 400.000， 350.000 400.000，350.000 Z; M50.000，350.000 C116.667，116.667 166.667，83.333 200.000，250.000 C233.333，316.667 266.667，316.667 300.000，250.000 C350.000，200.000 450.000，250.000 400.000，350.000 Z < animate attributeName = fill dur = 5s repeatCount = indefinite values = red; gold; red /> < / path> <！-< path id ='PathBefore'd ='M 50350 Q 150 0200250 Q 250350300250 C 350200450250400350 Z'/< path id ='PathNow'd ＝ M 50 350 C 50150150150250300 C 300150400150400350 Z。 < / svg>  

UPDATE

OP更新了他们的问题，所以我更新了我的答案：
我看到这些路径实际上是折线。显然，除了 M 和 Z 之外，唯一使用的命令是 L

在这种情况下，实现所需目标的最简单方法是将这些路径编程为具有相同的点数。

如果这不可能，则更简单的方法是减少第一条路径的点数（从80 t0到68）。为此，您需要将 d 字符串拆分为点数组 path.split（ L）并删除每六分之一左右。接下来，将这些点重新连接到一个字符串中，以用作 d 属性。

另一种方法是将点添加到第二条路径（从68到80）。为此，您需要将 d 字符串拆分为一个点数组，并且每n个点之间需要添加一个点。然后再次将这些点重新连接到一个字符串中，以用作 d 属性或 values 属性。 / p>

I have two svg path curves that I want to animate. I want that in 5 seconds dPathBefore becomes dPathNow with a smooth animation transition.

That is my code:

const dPathBefore = 'M 50 350 Q 150 0 200 250 Q 250 350 300 250 C 350 200 450 250 400 350 Z'
const dPathNow = 'M 50 350 C 50 150 150 150 250 300 C 300 150 400 150 400 350 Z'

export class PathAnimation extends React.Component {
  render() {
    return (
      <svg width={500} height={400} className={'ba b--black'}>
        <path d={dPathBefore} fill={'cyan'} fillOpacity={0.5} />
        <path d={dPathNow} fill={'red'} fillOpacity={0.5} />
      </svg>
    )
  }
}

I read that article and I tried to do that:

<path d={dPathBefore}>
  <animate
    dur={'5s'}
    repeatCount={'indefinite'}
    attributeName={'d'}
    values={`${dPathNow};${dPathBefore};${dPathNow};`}
  />
</path>

That produce:

The result is not acceptable to me. The red curve is expected to become the blue one in a slow way. There should be an interpolation between the two so they have been to animated. I have never done a thing similar to that so I don't know where to start.

I have no preference on how to do this. I can use Javascript, CSS, SVG, ...

Thanks to anyone who wants to help me

---

A two possible paths are:

M504,217.96837758046047L489.59781879350896,217.05585884731812L470.86363307560316,214.2021740591243L455.24935650686257,209.88898669246805L442.67616275831006,204.52579180948993L432.5944768620284,198.43751290445206L424.4076807324568,191.85175297774788L417.62321391335945,184.92109353338404L411.87012300262165,177.7474756349613L406.876559933356,170.40012929754275L402.4429368598935,162.92731775668844L398.4201589437205,155.36378367845086L394.693739903777,147.73548290048342L391.1725185650579,140.06266051775228L387.78055397450754,132.3619264061584L384.4510660137251,124.6477375137062L381.1215780529427,116.933548621254L377.72961346239236,109.2328145096601L374.2083921236733,101.55999212692899L370.4819730837299,93.93169134896155L366.4591951675568,86.36815727072396L362.0255720940944,78.89534572986962L357.03200902482877,71.54799939245105L351.278918114091,64.37438149402831L344.4944512949937,57.443722049664444L336.30765516542243,50.85796212296023L326.2259692691408,44.76968321792228L313.65277552058853,39.40648833494413L298.03849895184834,35.09330096828778L279.3043132339424,32.23961618009379L258.451066013725,31.2327292526072L237.59781879351084,32.23961618009349L218.8636330756046,35.09330096828717L203.2493565068637,39.40648833494333L190.67616275831108,44.76968321792134L180.5944768620291,50.857962122959165L172.40768073245744,57.443722049663336L165.62321391335996,64.37438149402718L159.87012300262202,71.54799939244992L154.8765599333564,78.8953457298685L150.4429368598938,86.36815727072283L146.4201589437207,93.93169134896044L142.69373990377724,101.55999212692791L139.1725185650581,109.23281450965906L135.7805539745077,116.93354862125298L132.4510660137253,124.64773751370521L129.12157805294288,132.36192640615744L125.72961346239249,140.06266051775137L122.2083921236734,147.7354829004825L118.48197308372997,155.36378367845L114.45919516755694,162.92731775668761L110.02557209409443,170.40012929754198L105.03200902482891,177.7474756349606L99.27891811409114,184.92109353338338L92.49445129499384,191.85175297774725L84.3076551654224,198.43751290445152L74.22596926914088,204.52579180948948L61.65277552058859,209.88898669246763L46.03849895184814,214.20217405912402L27.304313233942423,217.055858847318L6.451066013724983,218.06274577480457L6.451066013724983,218.06274577480457L0,217.96837758046047L0,190.55329757211615L0,163.13821756377183L0,135.7231375554275L0,108.3080575470832L0,80.89297753873888L0,53.47789753039454L0,26.06281752205024L0,-1.3522624862941086L252,-1.3522624862941086L504,-1.3522624862941086L504,26.06281752205024L504,53.47789753039454L504,80.89297753873888L504,108.3080575470832L504,135.7231375554275L504,163.13821756377183L504,190.55329757211615Z

and:

M0,198.47868323936274L4.927028427960408,206.02871397201466L11.93725138272032,213.71099149842013L22.20984708937999,221.034554053252L38.419917256266814,227.6527556580375L65.18825228558191,232.7633822265229L104.68485444720656,234.82977872657665L104.68485444720656,234.82977872657665L144.18145660882874,232.7633822265232L170.94979163814477,227.652755658038L187.15986180503202,221.03455405325258L197.4324575116921,213.71099149842075L204.4426804664522,206.02871397201534L209.55669285362313,198.14571060477368L213.49875943621376,190.14123492852747L216.6785335463443,182.0587480265382L219.34296743530004,173.9239532585937L221.64982920279115,165.75306376812097L223.7054669341448,157.55691088670665L225.58541432472487,149.34313699247687L227.3463210486864,141.11744544980337L229.03330750837762,132.8843621970575L230.68485444720648,124.64773751370622L232.33640138603536,116.41111283035495L234.02338784572657,108.17802957760907L235.7842945696881,99.9523380349356L237.6642419602681,91.7385641407058L239.71987969162174,83.54241125929147L242.02674145911286,75.37152176881874L244.69117534806858,67.23672700087423L247.87094945819908,59.154240098884955L251.81301604078962,51.149764422638725L256.9270284279605,43.26676105539707L263.9372513827204,35.58448352899161L274.2098470893801,28.26092097415973L290.4199172562667,21.642719369374305L317.18825228558194,16.532092800888876L356.6848544472066,14.465696300835148L396.18145660882567,16.532092800888222L422.9497916381429,21.642719369373268L439.15986180503097,28.26092097415861L449.4324575116914,35.58448352899036L456.4426804664517,43.26676105539579L461.55669285362274,51.1497644226374L465.4987594362135,59.15424009888365L468.67853354634417,67.23672700087295L471.3429674352999,75.37152176881747L473.64982920279107,83.54241125929025L475.70546693414474,91.73856414070463L477.58541432472487,99.95233803493443L479.3463210486864,108.17802957760796L481.03330750837756,116.41111283035387L482.6848544472064,124.64773751370517L484.3364013860353,132.88436219705648L486.0233878457266,141.11744544980237L487.78429456968803,149.3431369924759L489.6642419602681,157.55691088670574L491.7198796916217,165.75306376812011L494.0267414591128,173.92395325859286L496.69117534806855,182.05874802653742L499.87094945819905,190.14123492852673L503.8130160407896,198.145710604773L504,198.47868323936274L504,224.5632103765343L504,250.6477375137059L252,250.6477375137059L0,250.6477375137059L0,224.5632103765343Z

But it is not me who create them, is an external application that return them to me and they can be extremely different between them.

解决方案

The d attribute for the paths has to have the same commands. I've rewritten your paths and now it works. I hope this helps.

svg{border:1px solid; width:100vh}

<svg viewBox = "30 120 400 250">

  <path d="M50.000, 350.000 
          C116.667, 116.667 166.667, 83.333 200.000, 250.000 
          C233.333, 316.667 266.667, 316.667 300.000, 250.000 
          C350.000, 200.000 450.000, 250.000 400.000, 350.000 Z">
  <animate
    dur='5s'
    attributeType="XML"
    attributeName='d'      
    repeatCount='indefinite'
    
           values="M50.000, 350.000 
          C116.667, 116.667 166.667, 83.333 200.000, 250.000 
          C233.333, 316.667 266.667, 316.667 300.000, 250.000 
          C350.000, 200.000 450.000, 250.000 400.000, 350.000 Z;
                   
          M50.000, 350.000 
          C50.000, 150.000 150.000, 150.000 250.000, 300.000 
          C300.000, 150.000 400.000, 150.000 400.000, 349.999 
          C400.000, 349.999 400.000, 350.000 400.000, 350.000 Z;
                   
           M50.000, 350.000 
          C116.667, 116.667 166.667, 83.333 200.000, 250.000 
          C233.333, 316.667 266.667, 316.667 300.000, 250.000 
          C350.000, 200.000 450.000, 250.000 400.000, 350.000 Z"
  />
    
    <animate 
             attributeName="fill"
             dur="5s" 
             repeatCount="indefinite"
             values="red;gold;red"
    />
             
    </path>
 
    <!--
<path id='PathBefore' d= 'M 50 350 Q 150 0 200 250 Q 250 350 300 250 C 350 200 450 250 400 350 Z'/>
<path  id='PathNow' d= 'M 50 350 C 50 150 150 150 250 300 C 300 150 400 150 400 350 Z'/>-->   

</svg>

UPDATE

The OP updated their question so I'm updating my answer: I see those paths are practically polylines. Apparently the only command used apart of M and Z is L

In this case the simplest way to achieve what you want would be by programming those paths to have the same number of points.

If this is not possible, the easier way would be by reducing the number of points of the first path (from 80 t0 68). For this you need to split the d string into an array of points path.split("L") and remove every 6th or so. Next you join the points back into a string to be used as a d attribute.

An other way would be adding points to the second path (from 68 to 80). To do this you will need to split the d string into an array of points, and every n points you need to add a point in between. Then again you join the points back into a string to be used as a d attribute or for the values attribute.

这篇关于内插和设置两个SVG路径的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！