レスポンシブCSSモーションパスを作成しますか？確かにできます！

最近、職場でのアニメーションに関する議論が、興味深い課題を引き起こしました。レスポンシブCSSモーションパスを作成します。この投稿では、複雑さを調査し、JavaScriptベースのソリューションを提示します。

CSSモーションパスは、 offset-pathプロパティを使用して、SVGパスと同様に定義されたカスタムパスに沿って要素をアニメーション化できます。ただし、重要な制限は、パス座標がピクセル値として扱われ、応答性を妨げることです。特定のサイズに対して定義されたパスは、ビューポートの変更で優雅にスケーリングすることはありません。

offset-distanceプロパティは、パスに沿った要素の位置を制御しますが、 offset-rotate回転を管理します。 offset-distanceをアニメーション化すると、モーション効果が作成されます。

コアの問題は、CSSモーションパスの固定ピクセルの性質にあります。ビューボックスでスケーリングするSVGパスとは異なり、CSSパスは静的なままであるため、さまざまなビューポートサイズの手動調整が必要です。これは単純なパスで管理可能ですが、複雑なパス、特にベクトル編集者からインポートされたパスは維持が困難になります。サイズ変更には、ブレークポイントごとにベクトルエディターからパスを再輸出する必要があります。これは、扱いにくいプロセスです。

単純なパスを考えてみましょう：

 。要素 {
   - パス：​​ 'M20,20 C20,100 200,0 200,100';
  オフセットパス：パス（var（ - パス））;
}

これをスケーリングするには、さまざまなブレークポイントのパス座標を再計算する必要があります。

 @media（min-width：768px）{
  。要素 {
     - パス：​​ 'M40,40 C40,200 400,0 400,200'; //手動の再計算
  }
}

これは、複雑なパスで指数関数的に挑戦的になります。

JavaScriptソリューションは、よりエレガントなアプローチを提供します。 GreensockのMotionPathプラグインなどのライブラリは、SVGパスのスケーリングを提供しますが、SVGコンテキストの外側のパスにはより一般的なソリューションが必要です。カスタム関数はパスを動的にスケーリングできますが、これは些細なことではありません。

図書館のアプローチ

D3.JSのような図書館は、潜在的なソリューションを提供します。これにより、座標セットからパス文字列を生成し、カスタマイズされたスケーリングと曲線調整を可能にします。ただし、既存のパスを座標セットに変換する必要がありますが、これは理想的ではありません。

より良いアプローチには、ベクトルエディターからパス文字列を直接処理することが含まれます。 SVGOMGなどのツールを使用してSVGを最適化した後、パスデータとビューボックス情報を抽出します。

<svg height="300" viewbox="0 0 79.375 79.375" width="300" xmlns="http://www.w3.org/2000/svg"><path d="M10.362 18.996s-6.046 21.453 1.47 25.329c10.158 5.238 18.033-21.308 29.039-18.23 13.125 3.672 18.325 36.55 18.325 36.55l12.031-47.544" fill="none" stroke="#000" stroke-width=".265"></path></svg>

d属性（パス文字列）とviewBox属性に興味があります。

JavaScriptソリューションの強化

JavaScript関数は、パス文字列とビューボックスの境界を入力として取得します。 SVGGeometryElement APIを使用してパス文字列をデータセットに変換し、パスの長さを繰り返してポイントを抽出します。 D3.JSスケールは、コンテナサイズとビューボックス比に基づいてスケーリングされたパス文字列を生成するために使用されます。これにより、パスはコンテナ内で比例してスケーリングしながらアスペクト比を維持します。 ResizeObserver 、コンテナがサイズを変更するたびにパスを動的に更新します。完全な関数は、付随するデモで利用できます。

このアプローチにより、さまざまなブレークポイントを手動で再計算することなく、ベクターエディターから直接パスを使用でき、レスポンシブCSSモーションパスの堅牢で保守可能なソリューションを提供します。 GitHubパッケージ「Meanderer」は、この機能を提供します。デモはソリューションを紹介し、さまざまな最適化されたSVGパスでテストを可能にします。

以上がレスポンシブCSSモーションパスを作成しますか？確かにできます！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。