注册
web

情侣空间动态时间效果,你学废了吗?


前言


中秋这天刚好碰上和女朋友在一起的 五周年 了,想来五年风风雨雨仍然好好的,挺是感慨,也挺满足的。qq情侣空间也毫不意外的准点报时了,闲来无事点进去看了看,瞥到一个动效,觉得很有意思,于是打算自己动手实现一下,也算是尝试了。


动效长这样:


Video_20220912_014016_213.gif


码上掘金


动态日期特效 - 码上掘金 (juejin.cn)


思路解析


日期函数的使用频率可以说是很高了,不管是原生手写也好,还是用的 day.js 这种第三方库,在业务开发中我们经常需要处理日期进行展示。由于这边的时间处理不复杂,因此我们直接手写一个就好了。


获取年月日我们分别使用 getFullYear()getMonth() 还有 getDate() ,需要注意的是,很多新手小伙伴经常会把 getDay() 误以为是获取日的功能,实际上是用的 getDate() 实现的,还有一个需要注意的地方是,获取月份的函数 getMonth() ,获取的时间范围是 (0,11) ,没错,它是从 0 开始的,最后为了展示我们还需要让它 +1


时分秒我们分别使用 getHours()getMinutes() 还有 getSeconds() 三个方法,其中,分和秒的函数返回的是 (0, 59),也就是说不超过两位数的话,输出形式是个位数,我们需要手动补 0,可以通过字符串拼接过 padStart() 实现。


最后,我们观察一下这个效果,实际上它只有最后一个数字是向上淡出的,也就是说我们只要处理这个数字就好了,那么问题就简单了。


我们先将秒的个位和十位分开,将它们分为两个部分单独展示,这样我们就可以单独处理这个数字的特效了。


向上淡出,你第一思路是什么?


对了,是定位+透明,我们就用这个思路试一试。


一开始给它设置为相对定位 position: relative。接下来实现动效,为了让它不断的有这么个淡出效果,我们自然而然想到要使用动画,从当前位置开始,结束的时候增大透明度并且向上移动,逻辑很快就写好了。


涉及知识点


1. Date 日期类




  • Date.prototype.getDate():根据本地时间,返回一个指定的 Date 对象为一个月中的哪一日(1-31)。




  • Date.prototype.getFullYear():根据本地时间,返回一个指定的 Date 对象的完整年份(四位数年份)。




  • Date.prototype.getHours():根据本地时间,返回一个指定的 Date 对象的小时(023)。




  • Date.prototype.getMinutes():根据本地时间,返回一个指定的 Date 对象的分钟数(059)。




  • Date.prototype.getMonth():根据本地时间,返回一个指定的 Date 对象的月份(011),0 表示一年中的第一月。




  • Date.prototype.getSeconds():根据本地时间,返回一个指定的 Date 对象的秒数(059)。




2. 时间补零


getMinutes()getSeconds() 获取的时间是没有前缀零的,我们可以判断一下,如果时间小于 10 ,则用 0 拼接。


也可以使用 padStart() 进行补零操作。



关于 padStart() 的更多用法,详见:String.prototype.padStart() - JavaScript | MDN (mozilla.org)



结束语


相信不少小伙伴像我一样,因为行业原因,工作中动效开发频率很低,这块的实战经验也很薄弱,为了以后能更好的搬砖,我们应该从小 demo 开始,不断的去练习提升,基础进阶两手抓。


作者:CatWatermelon
来源:juejin.cn/post/7142412506815250445

0 个评论

要回复文章请先登录注册