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

相关推荐
XiaoSong4 小时前
从未有过如此丝滑的React Native开发体验:EAS开发构建完全指南
前端·react.js
掘金者阿豪4 小时前
打通KingbaseES与MyBatis:一篇详尽的Java数据持久化实践指南
前端·后端
RoyLin5 小时前
TypeScript设计模式:原型模式
前端·后端·node.js
我是天龙_绍5 小时前
vue Composables 组合式函数
前端
zjjuejin5 小时前
Maven项目的核心蓝图:POM文件
前端·maven
小气小憩5 小时前
“暗战”百度搜索页:Monica悬浮球被“围剿”,一场AI Agent与传统巨头的流量攻防战
前端·人工智能
前端付豪5 小时前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮5 小时前
js符号(Symbol)
前端·javascript
恋猫de小郭6 小时前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
大怪v6 小时前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法