RealtSVGにアニメーションを入れる

ReactSVGにViewBoxを操作するアニメーションを追加します.
アニメーションの使用方法
いろいろあるかもしれませんが、以下のように見つかりました.

CSS使用

classまたはidを持つ単純なオブジェクトに単純なアニメーションを提供する際の絶好の方法

CSSにビューを渡すとJSがきれいになるので、アニメーションは要素のみにclassを指定することが望ましい.

classまたはIDを正しく指定する必要があります.

現在はsvgを使用しているため、jsのデータを頻繁に出入りする必要があるが、望ましくないように見える

SMIL

HTMLで使う

既知存在、調査無し

・コメントリンクを見ると、投稿自体も古く、投稿にSMILを書く傾向もあります.

GSAP

動画ライブラリ

現在JSアニメーションを使用している最も簡単な方法

アニメーションはメインではないので、簡単にアニメーションを実現するためにGSAPを使ってアニメーションを実現することにしました.

最初の試み

次に、試したコードの一部を示します.

svg.addEventListener('click', this.onClick.bind(this));


//중략 ...

onClick(event){
        if(event.target.getAttribute('name'))
        {
            //console.log(event.target.getBoundingClientRect());
            let rect = event.target.getBoundingClientRect();
            this.current_viewbox.x = rect.top;
            this.current_viewbox.y = rect.bottom;
            this.current_viewbox.width = rect.width;
            this.current_viewbox.height = rect.height;

            this.animatingViewBox(event.target, this.current_viewbox.x, this.current_viewbox.y, this.current_viewbox.width, this.current_viewbox.height);
        }
    }

animatingViewBox(target, x,y,width,height){
        gsap.to(target, {
            duration: 1,
            viewBox : `${x} ${y} ${width} ${height}`
        });
    }

上記のコードの実行結果には、次のログが残ります.

Invalid property viewBox set to 312.7962646484375 544.2816772460938 288.6868896484375 231.48541259765625 Missing plugin? gsap.registerPlugin()

上記の機能を実行するにはpluginが必要なようです.
コメントリンク結果・設定CSSPlugin(DOM要素におけるCSSに関するPropertyに関するプラグイン)

CSSPlugin試行

したがって、プロジェクトの最上位(最優先の初期化プロセス)には、次の内容が記録されます.

gsap.registerPlugin(gsap.plugins.CSSPlugin);

結果は以下の通り

TypeError: Cannot read properties of undefined (reading 'name')

結果は変わらない( Cannot read properties ...)
pluginレジスタに何か問題があるようです

=>最終的には、次の方法で駆動に成功しました.

Plugin項目の削除

次のコード以下のコードを参考に修正

animatingViewBox(target, x,y,width,height){
  console.log("animating View Box...");
  gsap.to(target, {
    duration: 1,
    attr: {viewBox: `${x} ${y} ${width} ${height}`},
    ease: "power3.inOut"
  });
}

エラーの原因は、以前のイベントコードとGSAP 2.0バージョンで使用されていたTweepMaxの混合コード、および使用方法のエラーです.

targetの変更

上記の修正を行いましたが、最終的には所期の目標に達しませんでした.
targetを次のように変更します.

    onClick(event){
        if(event.target.getAttribute('name'))
        {
            let rect = event.target.getBoundingClientRect();
            this.current_viewbox.x = rect.top;
            this.current_viewbox.y = rect.bottom;
            this.current_viewbox.width = rect.width;
            this.current_viewbox.height = rect.height;

            this.animatingViewBox(this.svg, this.current_viewbox.x, this.current_viewbox.y, this.current_viewbox.width, this.current_viewbox.height);
        }
    }

変更内容は、要素(イベントのターゲット)ではなくSVG全体に対して指定されます.
結局、願いがかなった!

座標設定が不備なため、間違った場所を指すが、目標を達成した.座標を変更することで変更できます.
機能しない理由は、ViewBoxが単一の要素ではなくsvgファイルに対応しているからです.