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 13 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 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/10/03 PHP
php比较相似字符串的方法
2015/06/05 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
php实现微信公众号无限群发
2015/10/11 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
关于document.cookie的使用javascript
2010/10/29 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
python分析nignx访问日志脚本分享
2015/02/26 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
Python字符串的一些操作方法总结
2019/06/10 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
Python sep参数使用方法详解
2020/02/12 Python
基于python图像处理API的使用示例
2020/04/03 Python
keras中的backend.clip用法
2020/05/22 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
建筑专业自我鉴定
2013/10/22 职场文书
毕业生优秀推荐信
2013/11/26 职场文书
测绘工程专业求职信
2014/07/15 职场文书
老人节标语大全
2014/10/08 职场文书
工程资料员岗位职责
2015/04/13 职场文书
用Python实现屏幕截图详解
2022/01/22 Python
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫