前言
晚上加班赶工,等走出公司大门,已是漫天繁星。坐上回家的公交,困顿之意袭来。
大脑开始放空,意识开始飘散,感觉这条回家的路变得非常漫长。下意识的解锁手机查看时间,然后情不自禁的被屏保图片吸引,我的屏保图片是我向往的草原。
于是,我开始玩起了反复解锁查看屏保的小游戏。也逐渐发现一些平时没有注意到的,手机的功能细节。
日期的展示、指纹解锁的动效、解锁之后应用上移的效果,好像都能用 CSS 实现。事情开始变得有趣了,灵感来了,我怎么能轻易放走,当然是打开 IDEA 实现它。
一张向往的图片
天似穹庐,笼盖四野。
天苍苍,野茫茫。风吹草低见牛羊。
心中的向往,打工的动力,理想的生活。
image
整体效果
完整代码已经在线代码预览的平台上。
https://code.juejin.cn/pen/7122117149866328077
功能设计
按钮可操作性
根据手机操作实验,不难发现按钮可操作性跟当前屏幕状态有关。
所以这次的功能主要包括三个:息屏、亮屏、解锁。
功能实现
息屏
// 熄灭屏幕
function restShow() {
if (restFlag) {
screenLight.style.display = 'none';
fingerprint.style.display = 'none';
screenBlock.style.display = 'block';
lightContent.style.display = 'none';
lightFlag = true;
unlockFlag = false;
restFlag = false;
}
}
复制代码
亮屏
屏幕点亮之后,手机界面展示日期和海洋球。
可以进行息屏操作,也可以进行解锁操作。
// 点亮屏幕
function lightShow() {
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)。对应的是周日、周一至周六。
初始化日期信息
// 初始化日期信息
function initNowDate() {
var now = new Date();
var month = now.getMonth() + 1;
var day = now.getDate();
var hour = now.getHours();
var minutes = now.getMinutes();
var weekList = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var week = weekList[now.getDay()];
if (hour >= 0 && hour <= 9) {
hour = '0' + hour;
}
if (minutes >= 0 && minutes <= 9) {
minutes = '0' + minutes;
}
var timeStr = hour + ':' + minutes;
var dayStr = month + '月' + day + '日';
lightWeek.innerHTML = week;
lightDay.innerHTML = dayStr;
lightTime.innerHTML = timeStr;
}
复制代码
磨砂海洋球
常见的指纹解锁,一般通过 svg 实现,我的 svg 功底一般,所以我变通了一下,改成了磨砂海洋球。
.circular .liquid1 {
background: #2984d4;
transform: translate(0, 40px) translateZ(0);
animation: liquid1 6s linear infinite;
-webkit-filter: blur(13px);
filter: blur(13px);
}
.circular .liquid2 {
background: #e18554;
transform: translate(2px, 8px) translateZ(0);
animation: liquid2 6s linear infinite;
-webkit-filter: blur(11px);
filter: blur(11px);
}
.circular .liquid3 {
background: #2984d4;
transform: translate(-12px, 0) translateZ(0);
animation: liquid3 6s linear infinite;
-webkit-filter: blur(13px);
filter: blur(13px);
}
@keyframes liquid1 {
33% {
transform: translate(40px, 8px) translateZ(0);
}
66% {
transform: translate(0, 0) translateZ(0);
}
}
@keyframes liquid2 {
33% {
transform: translate(40px, 30px) translateZ(0);
}
66% {
transform: translate(0, -10px) translateZ(0);
}
}
@keyframes liquid3 {
33% {
transform: translate(50px, 50px) translateZ(0);
}
66% {
transform: translate(-10px, 50px) translateZ(0);
}
}
复制代码
解锁
// 解锁屏幕
function unlockShow() {
if (unlockFlag) {
fingerprint.style.display = 'none';
lightDate.style.display = 'none';
lightContent.style.display = 'block';
lightFlag = false;
unlockFlag = false;
restFlag = true;
}
}
复制代码
总结
想去五台山,祈福一下平安喜乐,感受一下仿佛伸手就能触碰到底云朵,眺望一下远方的草原和牛羊。
但是眼下,只能合上手机,睡一觉,梦里应该什么都有。
评论