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 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 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
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
Augularjs-起步详解
2016/07/08 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
Python操作SQLite简明教程
2014/07/10 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python下载指定页面上图片的方法
2016/05/12 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
详解Python字典的操作
2019/03/04 Python
Python jieba库分词模式实例用法
2021/01/13 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
应届生骨科医生求职信
2013/10/31 职场文书
采购员的工作职责
2013/12/26 职场文书
学校门卫岗位职责
2014/03/16 职场文书
售后服务承诺书
2014/03/26 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
Redis 异步机制
2022/05/15 Redis
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript