Question

在one of my previous question中，我问到如何为两个svg路径之间的过渡设置动画。我知道在我的情况下使用animated标签太复杂了，因为我的路径非常复杂且“不可预测”。

我找到了gsap库，我相信它将对我有帮助。这是我正在使用的代码：

import React from 'react'
import gsap, { TweenMax, Power2 } from 'gsap'

// example paths
const start =
  'M504,218.03470723826067L486.6401970759167,217.05546168413645L467.9061726178867,214.20181212746178L452.2919661559008,209.88866925502964L439.71877802832967,204.52551901017495L429.63706311342685,198.43728078766293L421.45022268399384,191.851556622786L414.66570643504747,184.9209283798573L408.91256568061823,177.747337873903L403.91895428364114,170.40001589195526L399.4852849887268,162.92722634676034L395.46246292998484,155.36371246933945L391.7360015272425,147.7354305648741L388.2147391955615,140.06262612082855L384.82273453267896,132.36190935249988L381.4932069605524,124.6477375137062L378.1636793884258,116.93356567491251L374.7716747255433,109.23284890658385L371.25041239386235,101.56004446253831L367.52395099112,93.93176255807295L363.50112893237804,86.36824868065204L359.06745963746374,78.89545913545712L354.0738482404867,71.54813715350937L348.32070748605753,64.37454664755509L341.5361912371112,57.443918404626345L333.34935080767843,50.858194239749366L323.26763589277573,44.76995601723728L310.69444776520476,39.406805772382526L295.08024130321934,35.09366289995029L276.34621684518925,32.240013343275464L255.49320696055227,31.233140225249358L234.64019707591856,32.24001334327514L215.90617261788813,35.09366289994968L200.29196615590206,39.40680577238173L187.71877802833063,44.769956017236325L177.63706311342756,50.858194239748315L169.4502226839945,57.44391840462522L162.66570643504798,64.37454664755393L156.91256568061866,71.54813715350824L151.91895428364148,78.89545913545598L147.48528498872713,86.36824868065094L143.46246292998507,93.93176255807185L139.73600152724268,101.56004446253723L136.2147391955617,109.2328489065828L132.82273453267914,116.93356567491149L129.49320696055256,124.64773751370521L126.16367938842599,132.36190935249894L122.77167472554342,140.06262612082762L119.25041239386249,147.7354305648732L115.52395099112013,155.3637124693386L111.50112893237812,162.92722634675954L107.06745963746386,170.4000158919545L102.0738482404868,177.74733787390227L96.32070748605761,184.9209283798566L89.53619123711132,191.85155662278538L81.34935080767849,198.43728078766236L71.26763589277579,204.5255190101745L58.69444776520481,209.88866925502924L43.080241303219196,214.20181212746152L24.34621684518919,217.05546168413633L3.493206960552243,218.0623348021624L3.493206960552243,218.0623348021624L0,218.03470723826067L0,190.61133602269132L0,163.18796480712197L0,135.76459359155263L0,108.34122237598328L0,80.91785116041393L0,53.494479944844585L0,26.071108729275238L0,-1.3522624862941086L252,-1.3522624862941086L504,-1.3522624862941086L504,26.071108729275238L504,53.494479944844585L504,80.91785116041393L504,108.34122237598328L504,135.76459359155263L504,163.18796480712197L504,190.61133602269132Z'
const end =
  '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'

export class PathAnimation extends React.Component {
  startRef = React.createRef()
  endRef = React.createRef()

  componentDidMount() {
    this.playAnimation()
  }

  playAnimation() {
    TweenMax.to(this.startRef.current, 1, {
      morphSVG: this.endRef.current,
      yoyo: true,
      repeat: -1,
      repeatDelay: 0.5,
      ease: Power2.easeInOut,
    })
  }

  render() {
    return (
      <svg width={500} height={400} className={'ba b--black'}>
        <g id="endPaths" style={{ visibility: 'hidden' }}>
          <path id="end" d={end} ref={this.endRef} />
        </g>
        <g id="startPaths" fill={'red'}>
          <path d={start} id="start" ref={this.startRef} />
        </g>
      </svg>
    )
  }
}

这是生成的错误：

invalid morphSVG tween value: [object SVGPathElement]

我不知道该怎么解决。

非常感谢您

Answer 1

听起来您只是忘记加载MorphSVGPlugin。并且不要忘记，如果您正在使用利用树震动的构建过程，则需要在代码中的某处引用MorphSVGPlugin，以便您的捆绑程序不会意外地将其标记为未使用的代码并将其转储。有点像：

import MorphSVGPlugin from "yourLocation/MorphSVGPlugin.js";

const plugins = [MorphSVGPlugin]; //just to prevent tree shaking from dumping it. 

TweenMax.to(... {morphSVG:...});

还要注意，MorphSVGPlugin是Club GreenSock的会员权益，因此不在公共下载或NPM中。您可以从greensock.com的帐户下载它。您也可以在Codepen上免费试用-参见https://greensock.com/try-plugins

如果您需要帮助，请访问https://greensock.com/forums

如何使用GSAP为两个SVG路径之间的过渡设置动画

1 个答案: