前言
晚上加班赶工，等走出公司大门，已是漫天繁星。坐上回家的公交，困顿之意袭来。
大脑开始放空，意识开始飘散，感觉这条回家的路变得非常漫长。下意识的解锁手机查看时间，然后情不自禁的被屏保图片吸引，我的屏保图片是我向往的草原。
于是，我开始玩起了反复解锁查看屏保的小游戏。也逐渐发现一些平时没有注意到的，手机的功能细节。
日期的展示、指纹解锁的动效、解锁之后应用上移的效果，好像都能用CSS实现。事情开始变得有趣了，灵感来了，我怎么能轻易放走，当然是打开IDEA实现它。
在线预览
在线预览平台，可查看完整代码，并体验效果。
一张向往的图片
天似穹庐，笼盖四野。
天苍苍，野茫茫。风吹草低见牛羊。
心中的向往，打工的动力，理想的生活。
整体效果
完整代码已经在线代码预览的平台上。
https://code.juejin.cn/pen/7122117149866328077
功能设计
按钮可操作性
根据手机操作实验，不难发现按钮可操作性跟当前屏幕状态有关。
操作 |
屏幕熄灭 |
屏幕点亮 |
主屏幕 |
息屏 |
❌ |
✅ |
❌ |
亮屏 |
✅ |
❌ |
✅ |
解锁 |
✅ |
❌ |
❌ |
功能实现
息屏
- 前置摄像头是一致都存在的，又一个可爱的小圆点和圆环组成；
- 息屏之后，可以进行亮屏操作，不可以进行解锁操作。
// 熄灭屏幕functionrestShow() { if (restFlag) { screenLight.style.display='none'; fingerprint.style.display='none'; screenBlock.style.display='block'; lightContent.style.display='none'; lightFlag=true; unlockFlag=false; restFlag=false; } }
亮屏
- 屏幕点亮之后，手机界面展示日期和海洋球。
- 可以进行息屏操作，也可以进行解锁操作。
// 点亮屏幕functionlightShow() { if (lightFlag) { screenLight.style.display='block'; fingerprint.style.display='block'; screenBlock.style.display='none'; lightDate.style.display='block'; initNowDate(); lightFlag=false; unlockFlag=true; restFlag=true; } }
展示日期
- 第一行是当前星期；
- 第二行是当前时分；
- 第三行是当前月日；
均可通过Date对象中获取，简单列一下
getMonth()：从 Date 对象返回月份 (0 ~ 11)。所以实际展示的时候需要进行+1。
getDate()：从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getHours()：返回 Date 对象的小时 (0 ~ 23)。
getMinutes()：返回 Date 对象的分钟 (0 ~ 59)。
getDay()：从 Date 对象返回一周中的某一天 (0 ~ 6)。对应的是周日、周一至周六。
初始化日期信息
// 初始化日期信息functioninitNowDate() { varnow=newDate(); varmonth=now.getMonth() +1; varday=now.getDate(); varhour=now.getHours(); varminutes=now.getMinutes(); varweekList= ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; varweek=weekList[now.getDay()]; if (hour>=0&&hour<=9) { hour='0'+hour; } if (minutes>=0&&minutes<=9) { minutes='0'+minutes; } vartimeStr=hour+':'+minutes; vardayStr=month+'月'+day+'日'; lightWeek.innerHTML=week; lightDay.innerHTML=dayStr; lightTime.innerHTML=timeStr; }
磨砂海洋球
常见的指纹解锁，一般通过svg实现，我的svg功底一般，所以我变通了一下，改成了磨砂海洋球。
- 依靠磨砂效果，海洋球有了立体感。
- 而磨砂的实现，使用的是CSS3 filter(滤镜) 属性。
.circular .liquid1 { background: #2984d4;transform: translate(0, 40px) translateZ(0); animation: liquid16slinearinfinite; -webkit-filter: blur(13px); filter: blur(13px); } .circular .liquid2 { background: #e18554;transform: translate(2px, 8px) translateZ(0); animation: liquid26slinearinfinite; -webkit-filter: blur(11px); filter: blur(11px); } .circular .liquid3 { background: #2984d4;transform: translate(-12px, 0) translateZ(0); animation: liquid36slinearinfinite; -webkit-filter: blur(13px); filter: blur(13px); } @keyframesliquid1 { 33% { transform: translate(40px, 8px) translateZ(0); } 66% { transform: translate(0, 0) translateZ(0); } } @keyframesliquid2 { 33% { transform: translate(40px, 30px) translateZ(0); } 66% { transform: translate(0, -10px) translateZ(0); } } @keyframesliquid3 { 33% { transform: translate(50px, 50px) translateZ(0); } 66% { transform: translate(-10px, 50px) translateZ(0); } }
解锁
- 解锁之后，主屏幕内容会有一个向上移动的效果，借助的是经典的animation动画。
- 此时，只能进行息屏操作，不用再重复亮屏操作。
// 解锁屏幕functionunlockShow() { if (unlockFlag) { fingerprint.style.display='none'; lightDate.style.display='none'; lightContent.style.display='block'; lightFlag=false; unlockFlag=false; restFlag=true; } }
总结
想去五台山，祈福一下平安喜乐，感受一下仿佛伸手就能触碰到底云朵，眺望一下远方的草原和牛羊。
但是眼下，只能合上手机，睡一觉，梦里应该什么都有。
