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跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
网页中CDATA标记的说明
Sep 12 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 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实现多进程并行执行脚本
2013/06/18 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
Python变量类型知识点总结
2019/02/18 Python
python查看数据类型的方法
2019/10/12 Python
Django继承自带user表并重写的例子
2019/11/18 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
python dict乱码如何解决
2020/06/07 Python
python开发一款翻译工具
2020/10/10 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
酒店个人求职信范文
2014/01/25 职场文书
行政部岗位职责范本
2014/03/13 职场文书
2015年党总支工作总结
2015/05/25 职场文书
mysql优化
2021/04/06 MySQL
python3实现无权最短路径的方法
2021/05/12 Python
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL
防止web项目中的SQL注入
2021/12/06 MySQL
python_tkinter弹出对话框创建
2022/03/20 Python
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸