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 刷新页面的代码小结 推荐
Apr 02 Javascript
基于jquery的表格排序
Sep 11 Javascript
谈谈对offsetleft兼容性的理解
Nov 11 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
JS匿名函数实例分析
Nov 26 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
Node.js中的child_process模块详解
Jun 08 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 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
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
js null undefined 空区别说明
2010/06/13 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
python获取远程图片大小和尺寸的方法
2015/03/26 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
孝敬父母的演讲稿
2014/05/14 职场文书
关于建议书的格式范文
2014/05/20 职场文书
啦啦队口号大全
2014/06/16 职场文书
初三毕业评语
2014/12/26 职场文书
中学社团活动总结
2015/05/07 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL