实现 Telegram 切换主题的动效

实现 Telegram 切换主题的动效

在线预览: Walter White

Telegram 是一款设计相当精良且体验良好的 App, 应用的美观度和流畅度都是业界的天花板, 前几天突发奇想想实现下 Telegram 的主题切换动效, 这篇文章主要是记录我的实现思路和过程.

分析

首先先分析 TG 的动画效果, 通过点击右上角的切换按钮

如果要切换到深色(dark)模式, 程序会在点击位置渲染一个圆, 圆初始很小, 随着时间流动逐渐放大, 直到占满整个屏幕, 并且被圆覆盖的部分会显示夜间模式的效果, 从而完成一个用户友好的主题切换效果.

如果要切换到亮色(light)模式, 程序会渲染一个占满屏幕的圆, 圆初始很大, 随着时间流动逐渐缩小, 直到缩小到点击的位置, 并且没有被圆覆盖的部分会显示亮色模式的效果, 从而完成一个用户友好的主题切换效果.

笔者一开始的思路是用 css + js 画一个圆, 然后动态计算圆位置, 给页面变化主题, 从而实现仅被圆覆盖的部分变换主题, 实现的时候发现思路完全是错误的, 因为 TG 的实现里圆可以仅遮盖一部分文字, 仅让文字的一部分变成新主题的颜色.

只好 Google 一下, 然后就发现了这篇帖子, 重点是最后一个评论, 一位叫做 rezaiyan 的用户一针见血的指明了重点:

Don't think it is complex, It takes a screenshot of the screen and shows on the screen and does a reveal animation on it and meanwhile he changes the theme of activity.

The following image shows you what happens.

Imgur

机翻下:

不要认为它很复杂，它会截取屏幕截图并显示在屏幕上，并在其上显示动画，同时他更改活动的主题。
下图向您展示了发生的情况
Imgur

思路瞬间打开了, 这不就是笔者之前做过的刮刮乐嘛, 接下来就是实现了.

实现

1. 点击切换主题时截图(利用 dom-to-image 实现), 然后将图片写入到 canvas 里面
2. 将 canvas 添加到 html 中, 并且占满整个屏幕
3. 切换主题, 此时真实的页面已经被 canvas 遮挡了, 所以切换主题后用户并不会察觉到
4. 利用 globalCompositeOperation 的特性在 canvas 上进行绘制圆形.

至此, 就实现了完整的效果, 完整代码可以至 tg-switch-themes 下载.

如果大家觉得有意思不妨给 Github 仓库点一个小星星, 满足一下笔者的虚荣心嘻嘻.