使用CSS，JS和SVG動畫，並避免倦怠

該劇集的特色是與蒂姆和大衛的交談，其中包括CSS-Tricks的工作人員，作家，顧問和教育工作者Sarah Drasner。 他們使用CSS，JavaScript和SVG探索動畫世界，突出了SVG比動畫的靜態圖形的優勢。 主題包括SVG 2和網狀梯度，克服倦怠，公開演講和寫作，教學的好處，平衡付費和社區工作以及莎拉作​​為科學插畫家的獨特背景。

討論強調了SVG的可擴展性和性能優勢，以創建詳細的交互式動畫，而無需在各種屏幕尺寸的情況下質量損失。 莎拉（Sarah）分享了她打擊倦怠的策略，包括涉及SVG動畫的個人周末項目。 對話還涵蓋了SVG用於UI/UX動畫的獨特功能，使用JavaScript用於復雜動畫，優化技術以進行平穩性能以及保持瀏覽器支持以及網格梯度等功能的重要性。

>通過iTunes訂閱|通過Stitcher

訂閱

>由HelloSign贊助。

鑰匙要點：

>由於其可伸縮性和性能而利用SVG進行動畫。
• >與個人項目一起打擊倦怠以重新點燃激情。
• >利用SVG的UI/UX動畫的唯一功能。 >
>使用CSS功能以外的複雜SVG動畫採用JavaScript。
• 探索諸如GSAP和SNAP.SVG之類的庫以進行有效的動畫創建。
• >通過最小化文件大小和使用有效的技術來優化SVG動畫。
• 保持更新有關SVG的進步和瀏覽器支持。
>
• >顯示註釋：

hellosign api sarah在Twitter上：@sarah_edo

> SVG動畫資源
sarah codepen
> Web Animations Workshop
薩拉的網站
greensock（gsap）
mo.js
> Web Animations API
d3.js
> React-Motion
>野外博物館
堆棧溢出
> css-tricks
>大衛·沃爾什（David Walsh）博客
> Amelia Bellamy-Royds
vue.js
Twitter：@mdavidgreen | @tevko | @versioningshow | @SitePointDotcom
• 對話突出顯示：
• • 莎拉過渡到自由職業和意外的工作。
  在用戶體驗和轉換率中執行良好的動畫的力量。 >
  • 莎拉的個人項目作為打擊倦怠的一種方法。
  與靜態圖形相比
  • 莎拉作為科學插圖畫家的背景。
  • >關於有抱負的公眾發言人的建議，以克服缺乏經驗。
  寫作作為學習和教學工具的價值。
  莎拉的全面教學svg動畫方法。
  網格梯度在SVG 2中的潛在影響。
  • （以下完整的成績單，省略了，但可根據要求可用。

以上是使用CSS，JS和SVG動畫，並避免倦怠的詳細內容。更多資訊請關注PHP中文網其他相關文章！