图片,包括插图和照片,可分三个阶段加载。
插图和照片会通过不透明度、曝光和饱和度三个错开的阶段来加载和过渡。
行为
逐渐淡入
持续时间
动画
持续时间
加载图片使用较长的持续时间,而过渡使用较短的持续时间。

插图和照片会通过不透明度、曝光和饱和度三个错开的阶段来加载和过渡。
逐渐淡入
持续时间
动画
加载图片使用较长的持续时间,而过渡使用较短的持续时间。

插图和照片可以在错开的时长内在三个阶段之间加载和过渡,而不是单独依赖于不透明度的变化。你可以结合图片不透明度、曝光和饱和度变化来满足你的需求。
图片应该从低对比度和低饱和度开始加载。一旦图片的不透明度达到100%,就以完整的饱和度显示图片。

加载图片时推荐使用的不透明度、曝光和饱和度
不透明度:0% 开始,100% 结束
曝光:Gamma,Black output(针对暗色图片)
饱和度:0 或 20% 开始,100% 结束

完全不透明和曝光

色彩饱和度
此过程适合更大的屏幕,例如加载 Chrome OS 的系统壁纸。
动画显示在更大的屏幕上加载 Chrome OS 的系统壁纸
将图片的淡入可视化,就像照片显影过程中图像逐渐显现一样。
不要以会让亮部过曝的方式调整这些级别。

推荐做法

不推荐做法
推荐使用较长的持续时间来加载图片,而切换时则使用较短的持续时间。
加载和过渡动画
加载图片时可添加微小的位置偏移。此处账户切换器中的背景图会水平滑入。
视频显示了切换账户时的动画