SASSとSMILオプションを備えたSVGローダー用のジェネレーターをどのように作成したか

この記事では、SMILとSASSアニメーションの両方のオプションを提供するSVGローダージェネレーターの作成について詳しく説明しています。このプロジェクトは、学習体験の合流から生まれ、カスタマイズ可能なSVGローダーを生成するための汎用性の高いツールを提供します。

ジェネレーターの起源

3つの重要な要因が開発に影響を与えました。

1。サラ・ドラスナーの「SVGアニメーション」

著者のSASSループへの最初の露出は、Sarah Drasnerの本、特にSASS関数を使用してアニメーションを驚かせるデータの視覚化のアニメーションに関する章から来ました。これは、アニメーションのためのSASSループの可能性への関心を引き起こしました。

2。ローダーレプリケーションリクエスト

Appleスタイルのローダーを複製するリクエストは、新たな知識のための実用的なアプリケーションを提供しました。著者は、アニメーションの遅延を効率的に管理するためにSASSループを実装しました。

 @for $ i 1から12 {
  .loader：nth-​​of-type（＃{$ i}）{
    アニメーション：1S $ i * 0.08S OpacityLoader Infinite;
  }
}
@KeyFrames OpacityLoader {
 {不透明：0; }
}

この簡潔なSASSコードは、バニラCSSのはるかに長い同等物と同じ結果を達成します。

 .loader：nth-​​of-type（1）{
  アニメーション：1S 0.08S OpacityLoader Infinite;
}
.loader：nth-​​of-type（2）{
  アニメーション：1S 0.16S OpacityLoader Infinite;
}

/ * ... */

.loader：nth-​​of-type（12）{
  アニメーション：1S 0.96S OpacityLoader Infinite;
}
@KeyFrames OpacityLoader {
  {不透明：0; }
}

3。ギャラリーのアイデア

SASSループの習熟度とローダーの必要性の組み合わせにより、ローダージェネレーターの概念が生まれ、すぐに利用できるオンラインリソースのギャップが認識されました。

デュアルアニメーション出力：SmilとSass

SASS出力を伴う初期の開発の課題により、代替としてSmil Animationが含まれました。ただし、出力が時折発散しているにもかかわらず、両方のオプションが最終的に統合されました。

Smil vs. CSS/SASS：重要な違​​い

開発プロセスは、いくつかの重要な区別を強調しました。

• リソースの独立性： CSSやSASSとは異なり、SMILはSVGマークアップ内で直接アニメーション化します。
• 画像の埋め込み： SVGが画像または背景として使用されると、スミルアニメーションが持続します。
• アニメーションの流動性：スマイルアニメーションはしばしばよりスムーズに見えますが、正確な理由は不明のままです。
• アニメーションチェーン： additive="sum" smilはアニメーションを順番に追加し、CSS/SASSは競合するプロパティの最後のアニメーション宣言を優先します。
• 変換処理：変換には、Smilの行動との平等を達成するためにSASSの回避策が必要でした。<g></g>形状をカプセル化する要素。

テクノロジースタック：vue.jsおよびnuxt.js

このプロジェクトは、コンポーネントベースのアーキテクチャ、直感的なデータバインディング、およびHTMLとSVGの取り扱いの容易さにVue.jsを活用しています。 nuxt.jsは、自動ルーティングやSEO最適化などの機能を備えた合理化された開発環境を提供します。

ローダーの使用例

ジェネレーターの柔軟性により、多様な統合方法が可能になります。

• バックグラウンド画像としてSVGを微笑む：生成されたSVGをダウンロードして、CSSの背景画像として使用します。
• 直接HTML埋め込み：生成されたSVGコードをHTMLに直接埋め込みます。
• SASSループ統合：生成されたSASSループを使用して、インラインSVGをアニメーション化します。

継続的な開発と将来の強化

将来の計画には、よりシンプルでシングルエレメントSVG操作のための3番目のスタイリングオプションを追加し、カスタムアニメーションパラメーターの処理に課題に対処し、コードの明確さを改善することが含まれます。プロジェクトのオープンソースの性質は、貢献とフィードバックを歓迎します。

シンプルなSASSループによって開始されたプロジェクトの旅は、過去の非推奨の懸念にもかかわらず、スマイルアニメーションのパワーと汎用性を示しています。ブラウザのサポートは（Caniuseなどのリソースを使用）チェックする必要がありますが、現在の状況は継続的な実行可能性を示しています。 Brevityのために、詳細なブラウザのサポートテーブルはここで省略されています。

以上がSASSとSMILオプションを備えたSVGローダー用のジェネレーターをどのように作成したかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。