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限制textarea每行输入字符串长度的代码
Oct 31 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 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
php网上商城购物车设计代码分享
2012/02/15 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
Python 代码性能优化技巧分享
2012/08/07 Python
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
python机器学习实战之树回归详解
2017/12/20 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
python3获取当前目录的实现方法
2019/07/29 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
PyQt5实现画布小程序
2020/05/30 Python
Python 创建TCP服务器的方法
2020/07/28 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
倡议书格式范文
2014/04/14 职场文书
会议欢迎标语
2014/06/30 职场文书
军事博物馆观后感
2015/06/05 职场文书