使用vue2.6实现抖音【时间轮盘】屏保效果附源码


Posted in Javascript onApril 24, 2019

写在前面:

前段时间看抖音,有人用时间轮盘作为动态的桌面壁纸,一时间成为全网最火的电脑屏保,后来小米等运用市场也出现了【时间轮盘】,有点像五行八卦,感觉很好玩,于是突发奇想,自己写一个网页版小DEMO玩玩,先看看效果:

使用vue2.6实现抖音【时间轮盘】屏保效果附源码

当然实现这个效果,前端的角度来说,有很多,这里介绍最简单的,达到这个效果纯粹是元素圆性布局,如果仅仅是这样肯定没有达到各位老铁心理需求,所以既然,做了肯定是要做一个麻雀虽小五脏俱全的小demo,于是就把vue全家桶用上带设置的小项目。接下来就一步一步带各位从0到1构建这个小东西。

一、项目需求:

功能描述:实现一个带设置的并兼容移动端的时间罗盘(设置包含:多语言切换,垂直水平位置,缩放大小,旋转角度,文字颜色,背景颜色等)

二、预备基础知识点:

1、圆形布局,如下效果图

使用vue2.6实现抖音【时间轮盘】屏保效果附源码

解析:

1、圆心:O点、半径r ,我这里用transform: translateX值来设置半径值;
2、圆心角:∠BOM;
3、需要布局的元素:A、B、C、D、E、F、G、H绝对定位的元素;
4、绝对定位时的元素的坐标点,可以用transform:rotate值,按照秒、分、小时、上下午、星期、日期、月等份旋转角度来控制各个元素在圆心的位置

有了这些信息,我们就开始写代码了(vue构建项目这里就略了 ),简单的直接用vue-cli3

三、项目布局效果开发

3.1布局

首先我们看到时间轮盘分别由 秒、分、小时、上下午、星期、日期、月,这几项组成,于是把他们都封装在一个小模块组件里

<template>
<div class="home">
<Second :second="second" />
<Minute :minute="minute" />
<Hour :hour="hour" />
<Apm :apm="apm" />
<Week :week="week" />
<Day :day="day" />
<Month :month="month" />
</div>
</template>

而且同一圆心,所以公共部分的样式可以共用

<style lang="scss">
.home {
ul {

list-style-type: none;
padding: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 60px;
width: 60px;
li {
 position: absolute;
 height: 60px;
 width: 60px;
 color: #fff;
 text-align: center;
 font-size: 14px;
 line-height: 20px;
}
}
}
</style>

这里圆布局,我们以星期为例看下面代码

Week.vue

<template>
<ul>
<li
 v-for="(item, index) in weekList"
 :key="index"
>
 {{ item }}
</li>
</ul>
</template>
<style scoped lang="scss">
ul {
z-index: 5;
@for $i from 1 through 7 {
li:nth-child(#{$i}) {
 transform: rotate(#{$i * 360/7 * 1deg}) translateX(180px);
}
}
}
</style>

先看看布局部分 ul li 标签v-for出周一到周天,一共七天,所以下面li的样式,熟悉scss语法的同学,就嘴角微微上扬,@for 的运用,360度被分成7等份 , 嗯,真香。来看一波效果,还不错

使用vue2.6实现抖音【时间轮盘】屏保效果附源码

那接下来,同样的操作把秒、分、小时、上下午、星期、日期、月全部配齐,耐心调translateX()其让秒、分、小时、上下午、星期、日期、月的半径不会互相重叠,看看效果,初具样子

使用vue2.6实现抖音【时间轮盘】屏保效果附源码

注意因为同一圆心和绝对定位所以每个模块要z-index 设置层

3.2JS同步时间

我们只需要通过JavaScript Date 对象new一个 Date()出来,然后通过Date 对象方法,获取到具体秒、分、小时、转换上下午、星期、日期、月。代码如下

<script>
export default {
name: "home",
methods: {

start() {
 setInterval(() => {
 let data = new Date();
 this.second = data.getSeconds();
 this.minute = data.getMinutes();
 this.hour = data.getHours();
 this.week = data.getDay();
 this.day = data.getDate();
 this.month = data.getMonth() + 1;
 if (this.hour > 12) {
 this.apm = 2;
 } else {
 this.apm = 1;
 }
 }, 1000);
}
},
created() {

this.start();
}
};
</script>

3.2转动

然后通过具体的秒、分、小时、上下午、星期、日期、月值ul转动transform:rotate:,来控制角度,而且当前值进行文字高亮。还是以星期为例Week.vue

<template>
<ul :style="{ transform: rotate(${((rotates * 360) / 7) * 1}deg) }">
<li
 v-for="(item, index) in weekList"
 :key="index"
 :class="{ hover: index == rotates - 1 || index == rotates + 6 }"
>
 {{ item }}
</li>
</ul>
</template>
<script>
export default {
name: "Week",
props: ["week"],
data() {
return {
 rotates: "",
 weekList: [
 "星期一",
 "星期二",
 "星期三",
 "星期四",
 "星期五",
 "星期六",
 "星期天"
 ]
};
},
watch: {
week(val) {
 this.rotates = val;
}
}
};
</script>

我们通过watch父组件home.vue传过来的星期数,然后对ul父容器进行旋转,li对应的星期数,动态加当前星期class .hover样式

li {
 position: absolute;
 height: 60px;
 width: 60px;
 color: #fff;
 text-align: center;
 font-size: 14px;
 line-height: 20px;
 // 高亮
 &.hover {
 text-shadow: rgb(255, 255, 255) 0px 0px 10px,
 rgb(255, 255, 255) 0px 0px 20px, rgb(255, 0, 222) 0px 0px 30px,
 rgb(255, 0, 222) 0px 0px 40px, rgb(255, 0, 222) 0px 0px 70px,
 rgb(255, 0, 222) 0px 0px 80px, rgb(255, 0, 222) 0px 0px 100px;
 }
}

:class="{ hover: index == rotates - 1 || index == rotates + 6 }",实现当前星期高亮,其他秒、分、小时、上下午、星期、日期、月亦是如此。接下来就可以爱的魔力转圈圈了

使用vue2.6实现抖音【时间轮盘】屏保效果附源码

到这里,基础效果我们已经开发完了

四、设置开发

4.1 全屏,这里直接用的是screenfull.js

4.2 切换语言,这里用了 i18n和js-cookie第三方插件,具体实现是模仿vue-element-admin的实现方式

import Vue from "vue";
import VueI18n from "vue-i18n";
import Cookies from "js-cookie";
import enLocale from "./en";
import zhLocale from "./zh";
import esLocale from "./zw";
Vue.use(VueI18n);
const messages = {
en: {
...enLocale
},
zh: {
...zhLocale
},
zw: {
...esLocale
}
};
export function getLanguage() {
const chooseLanguage = Cookies.get("language");
if (chooseLanguage) return chooseLanguage;
const language = (
navigator.language || navigator.browserLanguage
).toLowerCase();
const locales = Object.keys(messages);
for (const locale of locales) {
if (language.indexOf(locale) > -1) {
 return locale;
}
}
return "en";
}
const i18n = new VueI18n({
locale: getLanguage(),
messages
});
export default i18n;

值得注意的是我们把秒、分、小时、上下午、星期、日期、月统统都写在了多语言切换里,所以,我们要时刻计算语言的切换变化后的值。以星期为例,这里computed,weekList,实时计算它的变化,然后渲染页面

<script>
export default {
name: "week",
props: ["week"],
data() {
return {
 rotates: ""
};
},
computed: {
weekList: {
 get() {
 return this.$t("week");
 }
}
},
watch: {
week(val) {
 this.rotates = val;
}
}
};
</script>

看效果,为了美观简单加了一点设置的小效果,目前支持简体中文,繁体中文,英文

使用vue2.6实现抖音【时间轮盘】屏保效果附源码

4.3其他设置功能待开发...

占坑

当然布局用画布写,肯定是更优雅,总的来说实现起来并不是很难,如果要实现其他设置功能的话,部分逻辑需要重构,其他设置功能近期会陆陆续续更新发布出来,本项目源码学习移步

项目源码地址

总结

以上所述是小编给大家介绍的使用vue2.6实现抖音【时间轮盘】屏保效果附源码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
原生JS实现轮播图效果
Oct 12 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 #Javascript
详解微信小程序文件下载--视频和图片
Apr 24 #Javascript
详解微信小程序之一键复制到剪切板
Apr 24 #Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 #Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 #Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 #Javascript
详解Vue源码中一些util函数
Apr 24 #Javascript
You might like
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
php发送邮件的问题详解
2015/06/22 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
优秀党员转正的自我评价
2013/10/06 职场文书
物控部经理职务说明书
2014/02/25 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python