使用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中文网其他相关文章！