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判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 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实现批量查询清除一句话后门的代码
2008/01/20 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
vue数据双向绑定原理解析(get & set)
2017/03/08 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
python读取注册表中值的方法
2013/04/08 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
对Python中plt的画图函数详解
2018/11/07 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
关键字final的用法
2013/10/02 面试题
十一酒店活动方案
2014/02/20 职场文书
临床医学专业求职信
2014/08/08 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
教师工作总结范文2014
2014/11/10 职场文书
学校运动会简讯
2015/07/20 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python