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

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

>通過iTunes訂閱|通過Stitcher

訂閱

>由HelloSign贊助。

鑰匙要點(diǎn)：

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

hellosign api sarah在Twitter上：@sarah_edo

> SVG動(dòng)畫資源
sarah codepen
> Web Animations Workshop
薩拉的網(wǎng)站
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è)和意外的工作。
  在用戶體驗(yàn)和轉(zhuǎn)換率中執(zhí)行良好的動(dòng)畫的力量。 >
  • 莎拉的個(gè)人項(xiàng)目作為打擊倦怠的一種方法。
  與靜態(tài)圖形相比
  • 莎拉作為科學(xué)插圖畫家的背景。
  • >關(guān)於有抱負(fù)的公眾發(fā)言人的建議，以克服缺乏經(jīng)驗(yàn)。
  寫作作為學(xué)習(xí)和教學(xué)工具的價(jià)值。
  莎拉的全面教學(xué)svg動(dòng)畫方法。
  網(wǎng)格梯度在SVG 2中的潛在影響。
  • （以下完整的成績單，省略了，但可根據(jù)要求可用。

以上是使用CSS，JS和SVG動(dòng)畫，並避免倦怠的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！