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

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

>通過iTunes訂閱|通過Stitcher

訂閱

>由HelloSign贊助。

鑰匙要點：

>由于其可伸縮性和性能而利用SVG進行動畫。
• >與個人項目一起打擊倦怠以重新點燃激情。
• >利用SVG的UI/UX動畫的唯一功能。>
>使用CSS功能以外的復雜SVG動畫采用JavaScript。
• 探索諸如GSAP和SNAP.SVG之類的庫以進行有效的動畫創(chuàng)建。
• >通過最小化文件大小和使用有效的技術來優(yōu)化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
>大衛(wèi)·沃爾什（David Walsh）博客
> Amelia Bellamy-Royds
vue.js
Twitter：@mdavidgreen | @tevko | @versioningshow | @SitePointDotcom
• 對話突出顯示：
• • 莎拉過渡到自由職業(yè)和意外的工作。
  在用戶體驗和轉換率中執(zhí)行良好的動畫的力量。>
  • 莎拉的個人項目作為打擊倦怠的一種方法。
  與靜態(tài)圖形相比
  • 莎拉作為科學插圖畫家的背景。
  • >關于有抱負的公眾發(fā)言人的建議，以克服缺乏經驗。
  寫作作為學習和教學工具的價值。
  莎拉的全面教學svg動畫方法。
  網格梯度在SVG 2中的潛在影響。
  • （以下完整的成績單，省略了，但可根據(jù)要求可用。

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