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 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
JS轮播图的实现方法2
Aug 25 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
thinkphp模板用法和内容输出实例
2014/11/28 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
javascript prototype原型操作笔记
2009/12/07 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
js实现点击烟花特效
2020/10/14 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
Python下singleton模式的实现方法
2014/07/16 Python
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
Python中内建模块collections如何使用
2020/05/27 Python
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
职务任命书范本
2014/06/05 职场文书
个人求职意向书
2015/05/11 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
2015年暑假工作总结
2015/07/13 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python