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 22 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 Javascript
ES6中的类(Class)示例详解
Dec 09 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
介绍几个array库的新函数 php
2006/12/29 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
Python二分法搜索算法实例分析
2015/05/11 Python
详解python之简单主机批量管理工具
2017/01/27 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
Django app配置多个数据库代码实例
2019/12/17 Python
Python解析多帧dicom数据详解
2020/01/13 Python
Python urllib2运行过程原理解析
2020/06/04 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
就业自荐信
2013/12/04 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
就业意向书范本
2015/05/11 职场文书
会议室管理制度范本
2015/08/06 职场文书
手把手教你导入Go语言第三方库
2021/08/04 Golang