vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)


Posted in Javascript onNovember 05, 2018

前言:

此事例是在vue组件中,使用canvas实现倒计时动画的效果。其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了

canvas动画的原理:利用定时器,给定合理的帧数,不断的清除画布,再重绘图形,即呈现出动画效果。 

让我们先看下效果

  说明:此gif清晰度很低,因为转成gif图的时候,质量受损,帧数减少,所以倒计时转到红色时候看起来变的很模糊。但是实际在浏览器上效果全程都是很清晰和连贯的

vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)

使用

npm
 npm install vue-canvas-countdown --save-dev
es6 import
 import countDown from 'vue-canvas-countdown'

源码、demo、使用方法请参考github:https://github.com/Damon0820/vue-countdown

左手右手一个慢动作

说明:扇形颜色是渐变的(仔细看图:扇形逆时针方向渐变颜色,内侧浅,外侧深)

 vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)

vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)

vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)

动画步骤分析:假如设定倒计时总时间为15s, 变黄色时机为10s,变红色时机为5s。

1、开始倒计时后颜色为绿色。绿色含义是:倒计时的时间离结束时间还很长。

2、10s后变黄色。黄色的含义是:倒计时的时间离结束时间挺近了,起警告作用。动画中,出现快速旋转的扇形。

3、5s后变红色。红色的含义是:倒计时的时间马上就要结束了,起强烈警告作用。动画中,快速旋转的扇形速度加快。

4、0s倒计时结束。动画消失。静态圆形框中显示提示文字。

修炼js宝典,get canvas技能

    之前对于canvas一窍不通,网上查了资料,介绍api的时候过于简单,也不好理解,看别人写的示例代码,更是懵逼。而后,回归原始,修炼经典的《JavaScript高级程序设计》这本js宝典。书本二三十页的介绍canvas部分,系统的学习了一下。边看边写效果,20多页的书看完了,效果也写出来了。对于新手,我推荐找到系统介绍canvas的资料,先花一两个先熟悉下canvas的api,然后实现效果就是分分钟的事了

总结

以上所述是小编给大家介绍的vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
JavaScript实现移动端拖动元素
Nov 24 Javascript
用vue设计一个日历表
Dec 03 Vue.js
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 #Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 #Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 #Javascript
vue router的基本使用和配置教程
Nov 05 #Javascript
微信小程序tabbar底部导航
Nov 05 #Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 #Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 #Javascript
You might like
php快递单号查询接口使用示例
2014/05/05 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
javascript 精粹笔记
2010/05/09 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
在Python中表示一个对象的方法
2019/06/25 Python
关于python 跨域处理方式详解
2020/03/28 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
村道德模范事迹材料
2014/08/28 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
学校党支部承诺书
2015/04/30 职场文书
刑事附带民事代理词
2015/05/25 职场文书
负责培养人意见
2015/06/05 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
JavaScript 反射学习技巧
2021/10/16 Javascript