YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Chinese, Simplified subtitles

← Overdraw in Sunshine

Get Embed Code
4 Languages

Showing Revision 5 created 09/15/2016 by Udacity Robot.

  1. 你的设备上有一个实用的开发人员选项 用于呈现 GPU 过度绘制
  2. 开启此选项后
  3. 你会发现绘制布局时加上了一层色调
  4. 只绘制一次的像素以常规颜色显示
  5. 像素出现重复绘制时 就会加上一个色调
  6. 一次过度绘制为蓝色 两次为绿色 三次为粉色
  7. 四次或更多为红色
  8. 显然 目标是尽量减少红色
  9. 尽可能让一切更接近蓝色
  10. 为了解其工作原理 让我们看一看
  11. Dan 受 Material Design 启发而对 Sunshine 的界面进行更新的前后
  12. 你会注意到大部分内容都一样
  13. 但在采用 Material Design 后 所有对象的色调都往红色移动了一两步
  14. 这是因为 Material Design 注重组件美观性及过渡动画
  15. 因此带来了更重的绘制负担
  16. 一些事件的渲染负担也会更大
  17. 例如
  18. 点击往往会触发涟漪效果 以向用户提供操作反馈
  19. 在发生触摸事件时 可看到红色的过度绘制
  20. 在 Material Design 中
  21. 由于增添了滚动动画或菜单悬停动画等多种动画效果
  22. 这类规模较小的过度绘制也更为多见
  23. 这些动画元素让应用更加丰富多彩
  24. 有助于营造愉悦的用户体验 但也可以看到
  25. 所需的渲染负担也更大
  26. 此时对性能的考量就需要一定折衷
  27. 你希望实现一些出彩的效果 但不应该做得太过火
  28. 因此请恰当运用工具来设置常规测试流程
  29. 以评估所进行的改动 以及如何对其做进一步改进