React-springでSVGをモーフィングします

私は子供の頃から変形効果に惹かれてきました。形状の変化のアニメーションは、常に私の注意を引きます。変形効果を初めて見たとき、「うわー、どうやってやったの？」それ以来、デモプログラムを作成し、この効果に関する記事を書きました。

変形をサポートするさまざまなアニメーションライブラリに関しては、多くのオプションがあります。それらの多くは優れており、多くの機能を提供しています。最近、私はReact-Springに魅了されました。 React-Springは、Reactに基づいて構築された簡潔な物理アニメーションライブラリです。 Adam Rackisは最近、素晴らしい概要をリリースしました。このライブラリには、SVG変形を含む（および他の多くの）機能があります。実際、React-springの美しさは、それがどのように変形をサポートするかです。 SVGパス記述子を定義するタグに直接変形することができます。簿記の観点から、これは素晴らしいことです。 SVGパス記述子は、通常、予想される場所にあります。

以下は、この記事で説明したコンテンツのビデオです。

これは、オンボーディングシーケンスの変形効果です。ここでは、背景効果として使用されます。前景のアニメーションを補完するように設計されています。シーンを占有するのではなく、より目立たせてください。

SVGドキュメントを作成します

最初にしなければならないことは、基礎となるモデルを作成することです。通常、自分がやりたいことを明確に理解したら、ある種のデザインを作成します。私の探索のほとんどはモデルから始まり、デモで終わります。ほとんどの場合、これは私のベクトルエディターにSVGドキュメントを作成することを意味します。 Inkscapeを使用してSVGを描画しています。

SVGドキュメントを作成するときは、正確なスケールを使用します。正確であることがより良いと感じました。私にとっては、ブラウザやコードエディターと同じ座標系を使用するときに作成したいものを知覚するのに役立ちます。たとえば、パディングを含む24px✕30px SVGアイコンを作成しようとしているとします。最良の方法は、まったく同じサイズ、幅24ピクセル、高さ30ピクセルのSVGドキュメントを使用することです。比例結果が正しくない場合は、いつでも後で調整できます。この意味で、SVGは寛容です。何をしてもスケーラブルです。

作成したSVGドキュメントは、幅が256ピクセル、高さは464ピクセルです。

モデルを描画します

モデルを作成するときは、ノードが配置された場所と使用されるノードの数を考慮する必要があります。これは非常に重要です。これが、アニメーションの基礎を築く場所です。モデリングは、変形の全体的な内容です。別のノードのセットに変換されたノードのセットが1つあります。これらのノードセットには、まったく同じ数のノードが必要です。第二に、これらのセットは何らかの方法で関連付ける必要があります。

ベクトル形状の関係が慎重に考慮されていない場合、アニメーションは不完全になります。各ノードはアニメーションに影響します。彼らの位置と曲率はちょうどいいに違いありません。 SVGパスでノードがどのように構築されるかの詳細については、MDNのBezier曲線の説明を参照してください。

第二に、両方の形状を同時に考慮する必要があります。ベクトルの1つには、他のベクトルには見られない部分が含まれている場合があります。または、2つのモデルの間に他の違いがある場合があります。これらの場合、一部の場所に追加のノードを挿入することが最善です。戦略を開発するのが最善です。たとえば、この角度はそこにあり、この直線は曲線などに拡大します。

セットが正確な設計とあまり相関していない状況を説明するために、ペンをまとめました。次の例では、左の変形効果のノードがランダムに配置されます。数字1と2を構成するノード間に関係はありません。正しい例では、ノードの配置がより慎重に計画されています。これは、より首尾一貫した体験をもたらします。

最初のモデル

ラインツールは、最初のベクトル形状を描画するために使用するツールです。作成したモデルはより抽象的であるため、少し寛容です。まだ位置と曲率を考慮する必要がありますが、これによりarbitrary性が向上します。

ベクターとサイズについては、変形モデルの作成にも同じことが言えます。これは反復プロセスです。初めてが間違っている場合は、いつでも戻って調整することができます。通常、アニメーションを輝かせるには1つまたは2つの反復が必要です。これが完成したモデルの外観です。

結果は、8つのノードを備えた滑らかな抽象SVG形状になります。

2番目と3番目のモデル

最初のモデルが終了すると、2番目のモデルを描画できます（状態としても扱うことができます）。これは、変形する形状の最初のセットです。これが最終状態、つまり単一の変形効果です。または、キーフレームのように、それは途中で一歩かもしれません。私たちが見ている場合、3つのステップがあります。同様に、各モデルは以前のモデルに関連付けられている必要があります。モデルが一致することを確認する1つの方法は、最初のベクトルのコピーとして2番目のベクトルを作成することです。これにより、モデルには同じ数のノードと同じ外観と感触があることがわかります。

編集者には注意してください。ベクトルエディターは通常、ファイルのサイズと形式に最適化されます。変更を保存すると、モデルが互換性がない可能性があります。ファイルを保存した後、SVGコードをチェックする習慣を身に付けました。これは、パス記述子形式に精通している場合にも役立ちます。あなたがそれに慣れていないなら、それは少し神秘的です。また、ベクトルエディターの設定における最適化を無効にすることも良い考えです。

上記のプロセスを3番目の形状に繰り返します。すべてのノードをコピー、再配置し、3番目の色を設定します。

ライト、カメラ...アクション！

モデルを作成した後、ほとんどの作業を行いました。次に、アニメーションセクションをチェックします。 React-Springには、アニメーションや変形に使用できる一連のフックが付属しています。 USESPRINGは、この例の効果に最適です。これは、私たちが作成しているような単一のアニメーションで使用することを目的としています。 UseSpringフックを使用してアニメーションを開始する方法は次のとおりです。

 <code>const [{ x }, set] = useSpring(() => ({ x: 0, }));</code>

上記は、アニメーションプロパティXを提供し、その周りの変形効果を構築します。これらのアニメーションプロパティの大きな利点の1つは、それらを変更してほぼすべてのタイプのアニメーションを作成できることです。値が正しくない場合は、補間によって変更できます。

2番目のパラメーターであるセット関数を使用すると、更新をトリガーできます。以下は、使用法を示すコードスニペットです。 React-Use-Gestureライブラリのジェスチャーハンドラーを使用して、アニメーション値xを更新します。 React-Springでアニメーションをトリガーする方法はたくさんあります。

 <code>const bind = useDrag( ({ movement: [x] }) => {  // ...  set({ x }); }, );</code>

これで、モデル（パス記述子）とタグを組み合わせる準備ができました。 JSXコードにアニメーション化されたキーワードを追加することにより、React-Springアニメーションシステムをアクティブにしました。以前に命名された補間に補間コールを行うことにより、抗力距離を変形した形状に変換します。出力配列には、前述のモデルが含まれています。それらを配置するために、SVGファイルからパス記述子をタグにコピーするだけです。現在、3つの異なるパス要素から3つの異なる記述子Dが3つの異なるSVGファイルからコピーされ、1つに合わせてコピーされます。 JSXノードがReact-Springアニメーションを使用して駆動型を探している方法を次に示します。

<code><svg ...="">
<animated.path c="" d="{x.to({" first="" model="" output:="" range:="" second="" third="" z=""></animated.path></svg></code>

標準のJSXパス要素と現在持っている要素の違いを見てみましょう。変形アニメーションを取得するために、私たちは次のとおりです。

• Animatedキーワードを追加して、JSXパス要素をReactSpringでアニメーション化するようにします。
• 文字列から春の補間を反応するために記述子dを変更し、
• 距離xを3つのパス記述子間でキーフレームアニメーションに変換します。

開発環境

SVGを処理するための完璧な開発環境は見つかりませんでした。現在、私はベクトルエディター、IDE、およびブラウザーを前後に切り替えています。いくつかの複製といくつかの冗長性が関係しています。完璧ではありませんが、機能します。過去にSVGのスクリプトを解析しました。すべてのシナリオに適用できるものはまだ見つかりませんでした。たぶんそれは私が何か間違ったことをしただけです。そうでない場合は、SVGを使用したWeb開発がよりシームレスになる可能性がある場合は素晴らしいことです。

始めましょう！

最後になりましたが、デモ！

読んでくれてありがとう！

以上がReact-springでSVGをモーフィングしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。