实现 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 仓库点一个小星星, 满足一下笔者的虚荣心嘻嘻.

相关推荐
昔人'6 分钟前
css`text-wrap:pretty`
前端·css
勇敢di牛牛12 分钟前
Vue+mockjs+Axios 案例实践
前端·javascript·vue.js
詩句☾⋆᭄南笙22 分钟前
HTML列表、表格和表单
服务器·前端·html·表格·列表·表单
IT_陈寒34 分钟前
Python性能翻倍的5个冷门技巧:从GIL逃逸到内存视图的实战优化指南
前端·人工智能·后端
南城巷陌39 分钟前
错误边界:用componentDidCatch筑起React崩溃防火墙
前端·react.js·前端框架
FinClip44 分钟前
OpenAI推出Apps SDK,你的企业App跟上了吗?
前端·app·openai
馨谙1 小时前
Linux中的管道与重定向:深入理解两者的本质区别
前端·chrome
Rhys..1 小时前
JS - npm init
开发语言·javascript·npm
夏天想1 小时前
复制了一个vue的项目然后再这个基础上修改。可是通过npm run dev运行之前的老项目,发现运行的竟然是拷贝后的项目。为什么会这样?
前端·vue.js·npm
@大迁世界1 小时前
这个 CSS 特性,可能终结样式冲突
前端·css