Question

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

那是我的代码：

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>
    )
  }
}

我读了that article，然后尝试这样做：

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

产生：

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

我对如何执行此操作没有偏好。我可以使用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.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

和：

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

但是创建它们的不是我，而是一个将它们返回给我的外部应用程序，并且它们之间可能会截然不同。

Answer 1

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

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>

更新

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

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

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

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

内插和设置两个SVG路径的动画

1 个答案:

更新