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 相关文章推荐
javascript 数组的方法集合
Jun 05 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 Javascript
基于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
java模拟PHP的pack和unpack类
2016/04/13 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
JavaScript 序列化对象实现代码
2009/12/18 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
浅析vue深复制
2018/01/29 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
Django实现文件上传下载
2019/10/06 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
大学四年职业生涯规划书范文
2014/01/02 职场文书
新春文艺演出主持词
2014/03/27 职场文书
公司费用报销管理制度
2015/08/04 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
学前班教学反思
2016/02/24 职场文书
Win10 Anaconda安装python-pcl
2022/04/29 Servers
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL