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中创建对象的几种方式示例介绍
Jan 26 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
js实现二级导航功能
Mar 03 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
vue+iview+less 实现换肤功能
Aug 17 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
Javascript中的解构赋值语法详解
Apr 02 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
基于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
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
Tensorflow累加的实现案例
2020/02/05 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
元旦获奖感言
2014/03/08 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
贷款担保书
2015/01/20 职场文书
社区敬老月活动总结
2015/05/07 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
Pygame Rect区域位置的使用(图文)
2021/11/17 Python