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实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
jQuery实现元素的插入
Feb 27 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 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中防止SQL注入的最佳解决方法
2013/04/25 PHP
php MessagePack介绍
2013/10/06 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
Python制作爬虫采集小说
2015/10/25 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
办公室主任职责范文
2013/11/08 职场文书
店长助理岗位职责
2013/12/13 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
师德演讲稿范文
2014/05/06 职场文书
跳槽求职信范文
2014/05/26 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
初婚初育证明范本
2014/11/24 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
房贷收入证明范本
2015/06/12 职场文书
销售人员管理制度
2015/08/06 职场文书