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

相关推荐
软件技术NINI4 分钟前
html css js网页制作成品——HTML+CSS仙台有树电视剧网页设计(5页)附源码
javascript·css·html
DoraBigHead8 分钟前
React Fiber:从“递归地狱”到“时间切片”的重生之路
前端·javascript·react.js
YUELEI11817 分钟前
Vue 安装依赖的集合和小知识
javascript·vue.js·ecmascript
lecepin1 小时前
AI Coding 资讯 2025-10-22
前端·javascript·后端
gustt1 小时前
深入理解 JavaScript 的对象与代理模式(Proxy)
javascript
3秒一个大1 小时前
JavaScript 对象:从字面量到代理模式的灵活世界
javascript
BumBle2 小时前
uniapp AI聊天应用技术解析:实现流畅的Streaming聊天体验(基础版本)
前端·uni-app
搞个锤子哟2 小时前
vant4的van-pull-refresh里的列表不在顶部时下拉也会触发刷新的问题
前端
jnpfsoft2 小时前
低代码视图真分页实操:API/SQL 接口配置 + 查询字段避坑,数据加载不卡顿
前端·低代码
HHHHHY2 小时前
使用阿里lowcode,封装SearchDropdown 搜索下拉组件
前端·react.js