CSS、JS、SVGでアニメーション化し、燃え尽きを避けます

バージョンショーのこのエピソードでは、CSS-Tricksのスタッフライター、著者、コンサルタント、教育者であるSarah Drasnerが、ティムとデビッドとの会話を特徴としています。 彼らは、CSS、JavaScript、およびSVGを使用してアニメーションの世界を探求し、アニメーションの静的グラフィックに対するSVGの利点を強調しています。 トピックには、SVG 2とメッシュグラデーション、燃え尽き症候群、人前で話すことと執筆、教育の利点、有料とコミュニティの仕事のバランス、および科学的なイラストレーターとしてのサラのユニークな背景が含まれます。

議論は、さまざまな画面サイズにわたって品質の損失なしに詳細でインタラクティブなアニメーションを作成するためのSVGのスケーラビリティとパフォーマンスの利点を強調しています。 サラは、SVGアニメーションを含む個人的な週末プロジェクトを含む、燃え尽き症と戦うための戦略を共有しています。 会話は、UI/UXアニメーションのSVGのユニークな機能、複雑なアニメーションへのJavaScriptの使用、スムーズなパフォーマンスのための最適化技術、およびブラウザの進化したブラウザのサポートとメッシュグラデーションなどの機能を維持することの重要性についてもカバーしています。

経由で購読します Hellosignがスポンサー

キーテイクアウト：

そのスケーラビリティとパフォーマンスのためにアニメーションにSVGをレバレッジします。 情熱を統治するための個人的なプロジェクトとの燃え尽き症候群。

UI/UXアニメーションにSVGのユニークな機能を利用しています
• CSS機能を超えた複雑なSVGアニメーションにJavaScriptを使用します。
効率的なアニメーション作成のためのGSAPやsnap.svgなどのライブラリを探索します。 ファイルサイズを最小限に抑え、効率的なテクニックを使用して、SVGアニメーションを最適化します。
• show notes：
hellosign api
• TwitterのSarah：@sarah_edo
• svgアニメーションリソース

codepenのサラ

Webアニメーションワークショップ

サラのウェブサイト

• greensock（gsap）
• mo.js
• Webアニメーションapi
• d3.js
• react-motion
• フィールド博物館
• スタックオーバーフロー
• css-tricks
• David Walshブログ
• アメリア・ベラミー・ロイド
• vue.js
• Twitter：@mdavidgreen | @tevko | @versioningshow | @sitepointdotcom
• 会話のハイライト：
• • サラのフリーランスへの移行と予想外の仕事の豊富さ。
  • ユーザーエクスペリエンスと変換率における十分に実行されたアニメーションの力。
  バーンアウトと戦う方法としてのサラの個人的なプロジェクト。
  静的グラフィックスと比較したUI/UXアニメーションのSVGのユニークな利点。
  科学的なイラストレーターとしてのサラの背景。
  経験の欠如を克服するための一般の講演者を目指していることへのアドバイス。
  学習および教育ツールとしての執筆の価値。
  SVGアニメーションを教えるためのサラの包括的なアプローチ。
  SVG 2のメッシュ勾配の潜在的な影響

  

  （完全な転写が続き、簡潔にするために省略されますが、リクエストに応じて利用できます。）

以上がCSS、JS、SVGでアニメーション化し、燃え尽きを避けますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。