最近给 nzoo 折腾官网，拿 angular2.0 + webpack 实现SPA，然后觉得最终打包后的出口文件有点大，用户首次访问会有一个时间较长的白屏等候界面，感觉体验不太好。
于是希望在用户下载整个 bundle 时能够先看到一个“加载中”的UI做过度，鉴于 nzoo 的LOGO也较简洁，便舍弃笨重的雪碧图+step动画的形式，转以 mask-image + transition动画来实现。
整体最终交互如下（模拟的是 2G 网速）：
虽然界面简单，但整个动画仅仅使用了一张8kb大小的图片（戳我查看，注意是全白的会跟背景混一体）：
如交互截图所示，我们希望在用户刚进入页面时，开始从底部给 logo 填色，持续10秒的 easeout 动画然后停在距离顶部还有一小部分未填色的地方。
接着在用户下载完 bundle 后，用 300ms 时间填完整个logo再执行 angular 应用启动脚本。
什么是 mask-image
擅长捣弄 Flash 甚至 AE 的朋友相信对“遮罩层”的概念会很清楚，都是指定某层的元件的轮廓/灰度/alpha通道来作为自己剪影的依据。在 Flash 中遮罩层只支持矢量，而AE则支持多种形式的遮罩（毕竟人家用来后期的嘛）。
另外FW支持灰度遮罩，PS支持alpha遮罩（PS中称为“蒙版”）。而今天要聊的css3中的 mask-image 则是以指定图片的透明度作为剪影依据的。
介个怎么理解呢？我们来张简单的示意图：
相信玩 flash 的童鞋会不屑地一笑，觉得是个好简单的事儿—— 底部搞个填满色的DOM由下往上运动，顶部固定放个轮廓层（png）剪影整个动画就行了嘛。
然而现实比较骨感—— mask-image 所指定的遮罩图会死死地固定在被遮罩元素上，可以理解为若元素动了那么遮罩图也会随着动。也就是说 flash 的那一套不适用于css3上。
此路不通换条道走，咱天天写代码的撸ser总能机智地随机应变 —— 把动画改为 transition + background-position 来实现，而不靠元素本身瞎运动了。
我们现在手头有个 nzoo 的剪影，先看看填满整个logo 颜色需要怎么做，一共就俩步：
⑴ 放个DOM，给它配上 -webkit-mask-image 的样式指定遮罩图片；
⑵ 给 DOM上渐变色（得多次微调让渐变的角度、位置到位）。
于是初始化样式是这样的：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> mask-bg{ mask-image: url(src/image/common/mask.png); -webkit-mask-image: url(src/image/common/mask.png); position: absolute; width:409px;height:158px; background-image: linear-gradient(353deg,#89C027,#89C027 28%,#E96036 28%,#E96036 49%,#FEF158 49%,#FEF158 72%,#76C5EE 72%); background-image: -webkit-linear-gradient(353deg,#89C027,#89C027 28%,#E96036 28%,#E96036 49%,#FEF158 49%,#FEF158 72%,#76C5EE 72%); background-image: -moz-linear-gradient(353deg,#89C027,#89C027 28%,#E96036 28%,#E96036 49%,#FEF158 49%,#FEF158 72%,#76C5EE 72%); } </style> <mask-bg></mask-bg> |
鉴于 firefox 还不支持在样式中配置 mask-image 特性，所以代码中我们没写 -moz-mask-image。（firefox的兼容后面说）
总之与 mask-image 样式结合前后的是酱子的：
留意 nzoo 的字样是有倾斜角度的，所以我们在 liner-gradient 中加了个 353deg 用于线性倾斜填充，这里填充的角度以及位置，均是后期微调得出的数据。
接着我们在其顶部安放另一个DOM（），用作完全未填色的 logo （底色为#EEE）：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<style> mask-bg, mask-top{ position: absolute; width:409px;height:158px; mask-image: url(src/image/common/mask.png); -webkit-mask-image: url(src/image/common/mask.png); } mask-bg{ background-image: linear-gradient(353deg,#89C027,#89C027 28%,#E96036 28%,#E96036 49%,#FEF158 49%,#FEF158 72%,#76C5EE 72%); background-image: -webkit-linear-gradient(353deg,#89C027,#89C027 28%,#E96036 28%,#E96036 49%,#FEF158 49%,#FEF158 72%,#76C5EE 72%); background-image: -moz-linear-gradient(353deg,#89C027,#89C027 28%,#E96036 28%,#E96036 49%,#FEF158 49%,#FEF158 72%,#76C5EE 72%); } mask-top{ background-image: linear-gradient(bottom,#EEEEEE,#EEEEEE 60%,rgba(0,0,0,0) 60%); background-image: -webkit-linear-gradient(bottom,#EEEEEE,#EEEEEE 60%,rgba(0,0,0,0) 60%); background-image: -moz-linear-gradient(bottom,#EEEEEE,#EEEEEE 60%,rgba(0,0,0,0) 60%); } </style> <mask-bg></mask-bg> <mask-top></mask-top> |
为实现动画再加上 background-position、background-size 和 transition 定义：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<style> mask-bg, mask-top{ position: absolute; width:409px;height:158px; mask-image: url(src/image/common/mask.png); -webkit-mask-image: url(src/image/common/mask.png); -webkit-mask-image: url(src/image/common/mask.png载中”的UI做过度，鉴于 nzoo 的LOGO也较简洁，便舍弃笨重的雪碧图+step动画的形式，转以 mask-image + transition动画来实现。
整体最终交互如下（模拟的是 2G 网速）：
虽然界面简单，但整个动画仅仅使用了一张8kb大小的图片（戳我查看，注意是全白的会跟背景混一体）：
如交互截图所示，我们希望在用户刚进入页面时，开始从底部给 logo 填色，持续10秒的 easeout 动画然后停在距离顶部还有一小部分未填色的地方。 接着在用户下载完 bundle 后，用 300ms 时间填完整个logo再执行 angular 应用启动脚本。
什么是 mask-image 擅长捣弄 Flash 甚至 AE 的朋友相信对“遮罩层”的概念会很清楚，都是指定某层的元件的轮廓/灰度/alpha通道来作为自己剪影的依据。在 Flash 中遮罩层只支持矢量，而AE则支持多种形式的遮罩（毕竟人家用来后期的嘛）。 另外FW支持灰度遮罩，PS支持alpha遮罩（PS中称为“蒙版”）。而今天要聊的css3中的 mask-image 则是以指定图片的透明度作为剪影依据的。 介个怎么理解呢？我们来张简单的示意图：
相信玩 flash 的童鞋会不屑地一笑，觉得是个好简单的事儿—— 底部搞个填满色的DOM由下往上运动，顶部固定放个轮廓层（png）剪影整个动画就行了嘛。 然而现实比较骨感—— mask-image 所指定的遮罩图会死死地固定在被遮罩元素上，可以理解为若元素动了那么遮罩图也会随着动。也就是说 flash 的那一套不适用于css3上。 此路不通换条道走，咱天天写代码的撸ser总能机智地随机应变 —— 把动画改为 transition + background-position 来实现，而不靠元素本身瞎运动了。 我们现在手头有个 nzoo 的剪影，先看看填满整个logo 颜色需要怎么做，一共就俩步： ⑴ 放个DOM，给它配上 -webkit-mask-image 的样式指定遮罩图片； ⑵ 给 DOM上渐变色（得多次微调让渐变的角度、位置到位）。 于是初始化样式是这样的：
鉴于 firefox 还不支持在样式中配置 mask-image 特性，所以代码中我们没写 -moz-mask-image。（firefox的兼容后面说） 总之与 mask-image 样式结合前后的是酱子的：
留意 nzoo 的字样是有倾斜角度的，所以我们在 liner-gradient 中加了个 353deg 用于线性倾斜填充，这里填充的角度以及位置，均是后期微调得出的数据。 接着我们在其顶部安放另一个DOM（），用作完全未填色的 logo （底色为#EEE）：
为实现动画再加上 background-position、background-size 和 transition 定义：
|
