最近在网上刷到一个短视频——一个炫酷的夜间模式按钮是如何让设计师与程序员的矛盾产生的。夜间模式切换开关效果看着很是炫酷，但不管效果看起来多么复杂，聪明勇敢的前端人总是能想出办法来实现，最近就看到codepen上的大神就把这个切换效果做出来了。纯纯硬核代码完全实现，源代码已在文末整理好。动效分析
基于开关的动画效果可以将相关动画步骤进行模块拆分，大概可以拆分为下列模块：
![]()
- 开关状态为白天的时候，会有两朵云彩其中并有个飞机飞过。
- 开关状态为黑夜的时候，会有星星闪烁，还有宇航员熊飞过。
主要的动效就是这些，具体的还有很多细节，比如开关边缘的阴影效果，状态切换时候的贝塞尔曲线效果，等等，我们这篇文章主要解析核心代码，细节的代码也会在全代码文件里，有兴趣的可以去研究！需要的知识点
aria 英文全称：Accessible Rich Internet Application，翻译成中文就是：可访问的富互联网应用程序。其实它是一组属性，定义了使残疾人更容易访问 web 内容和 web 应用程序（尤其是使用JavaScript开发的应用程序）的方法。这类属性的作用是为了增强网页在残障辅助阅读设备上的识别读取。aria 是一种比较新的辅助访问技术，用来弥补 HTML 和 JS 本身对可访问性方面的不足。支持 aria 并不是必须或者强制的，但是支持 aria 会让你的应用变得更友好，更健壮。我们会用到，aria-pressedARIA属性，指示按钮的状态打开关闭混合。他可以表示：- aria-pressed="false"：可以表示按钮为关闭。
- aria-pressed="true"：可以表示按钮为开启
- aria-pressed="mixed"：可以表示按钮为混合状态，
语法：var(--variable-name, default-value)，--variable-name 表示变量名称，以两个连字符（--）开头，是任何自定义名称。default-value 是可选的，表示在指定变量未定义或无效时要使用的默认值。假设定义 --dark ，当其值为1的时候，最终的代码则是 scale: 1，如果 --dark 没有定义则最终的代码是 scale: 0：![]()
这些变量让我们更轻松地维护更新。
![]()
这样我们也就得到--dark 的值，这样也就可以控制整体页面的明暗，颜色等属性。
![]()
我们写这个按钮会用到很多这个属性，来控制元素的隐藏显示和一些动画效果
按钮背景切换
![]()
我们通过--dark 的变化更改 background ，也就是 --sky 和 --night 的值，
(tips：hsl 格式的色值，后面两个参数的值是需要百分比格式的值)就会给body设置 data-dark-mode 属性。![]()
通过 data-dark-mode 得到不同的值。
![]()
按钮内部的背景色切换
![]()
然后就是按钮内部的太阳转变为月亮，也就是黄色变成灰色。然后是开关内部的圆由黄色（太阳的效果）切换为灰色（月亮的效果）观察后发现，切换动画中，灰色圆由右至左的覆盖黄色圆， 灰色圆层级高于黄色。那么我们不难发现，效果的实现方式可以用定位和父子元素，即灰色圆是黄色的子元素。当---dark 为1时，需要平移当前总宽度减去自身圆的宽度的距离，即「3 / 8 * var(--width)」。![]()
2）圆内的动画
月亮的背景元素向左平移X轴的100%，之后修改X轴为0%。![]()
![]()
再加上过渡动画
![]()
外部的父元素增加了 overflow: hidden，所以默认平移X轴100%是不可见的，大家看下面没有增加 overflow: hidden 代码的效果就更清晰实现的原理了。
![]()
背景透明圆的切换动画
radial-gradient 径向渐变绘制三层背景色，掌握好色值渐变开始和结束以及大小。将中心定位于太阳的中心。和太阳做一样的平移动画就可以了。![]()
星空云朵切换动画
因为动效比较复杂，我们可以用svg来实现，源代码就放在最后的源代码里了，云朵分成两个颜色，所有要有两个SVG的代码，所以![]()
白天状态的云朵，并不是左右平移，而是上下，只需改变Y轴的值。
![]()
星星闪烁的效果其实就是通svg元素设置缩放动画，可以给不同的星星设置不同的执行时间和延迟执行时间。
![]()
宇航员 & 小飞机
这两个元素都有动画效果，宇航员一边飘过一边旋转，小飞机也缓缓上升。
![]()
到了这的我们基本就已经搞定了整个按钮的核心功能，实现了交互效果，但有一些细节的阴影，过渡，本塞尔曲线等没有进行具体的介绍。可能有很多人说这些东西只不过是炫技，从运行性能，开发效率，可访问性诸多方面都不如简单的直接播动画。确实，但这也是兴趣使然嘛！想要的源码的可以直接扫码加我，说你要源码哦！
推荐一个受到超多好评的终生学习小程序「千锋学习站」。
全网超火的课程资源：涵盖18个IT行业热门课程，3000G精品授课视频，从入门到精通，理论+实战，小白适用！全网超牛的公开课：定期邀请一线大厂大佬来直播间宣讲，全程干货，福利满满，从基础理论到实战案例，分享实战IT技能，拒绝纸上谈兵！全网超全的题库资源：1800个知识点练习，10万道面试真题，沉浸式刷题练习，帮助各位同学夯实基础，提升技术水平，为升职加薪保驾护航！
