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 相关文章推荐
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
基于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 allow_url_include的应用和解释
2010/04/22 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
学生励志演讲稿
2014/01/06 职场文书
代理商会议邀请函
2014/01/27 职场文书
市场部管理制度
2014/02/02 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
温馨提示标语
2014/06/26 职场文书
行政主管岗位职责
2015/02/03 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书