《Pluralsight - Building UIs with the Web Animations API》学习笔记

用Web Animation API创建UI

为什么使用动画

用户体验

常用动画实现方法

  • CSS
  • JS
  • waapi(web animation api)

浏览器渲染顺序和成本

计算 > 布局 > 着色 > 合成层

应当尽可能让动画发生在合成阶段
- transform
- opacity

一个例子

《Pluralsight - Building UIs with the Web Animations API》学习笔记

Web animations API与CSS animation的参数相似:
《Pluralsight - Building UIs with the Web Animations API》学习笔记

test

《Pluralsight - Building UIs with the Web Animations API》学习笔记
《Pluralsight - Building UIs with the Web Animations API》学习笔记

截图
《Pluralsight - Building UIs with the Web Animations API》学习笔记
《Pluralsight - Building UIs with the Web Animations API》学习笔记
《Pluralsight - Building UIs with the Web Animations API》学习笔记
《Pluralsight - Building UIs with the Web Animations API》学习笔记
《Pluralsight - Building UIs with the Web Animations API》学习笔记