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 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 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
在线竞拍系统的PHP实现框架(一)
2006/10/09 PHP
笑谈配置,使用Smarty技术
2007/01/04 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
React实现全选功能
2020/08/25 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
python如何定义带参数的装饰器
2018/03/20 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
个人作风纪律整顿整改措施
2014/10/25 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
学校教师培训工作总结
2015/10/14 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python