利用canvas实现的加载动画效果实例代码


Posted in Javascript onJuly 05, 2017

前言

以前在浏览文章时,看到过一个Android的加载效果,觉得挺好看的,于是自己就模仿了一个。下面话不多说,我们直接来看看详细的介绍吧。

运行效果图

利用canvas实现的加载动画效果实例代码

分析下这个效果:

      1.可以把这四个方块标号

      2.这个运动效果其实只用分解为两段动画,一段是上下移动,一段是左右移动。

示例代码:

/*核心代码*/
/*分析动画,其实动画只有两次的执行*/
   var for_index = 1;//记录当前执行动画的序列
   var interval = setInterval(function(){
    if(for_index == 1){
     if(squre4.x == origin_squre.x - step * 2){
      for_index = 2;
     }else{
      squre2.x -= 2;
      squre2.y += 1;

      squre4.x += 2;
      squre4.y -= 1;
     }
    }else if(for_index == 2){
     if(squre4.x == origin_squre.x){
      for_index = 1;

      /*重置方块位置信息到初始值*/
      init_squre(origin_squre.x,origin_squre.y);

     }else{
      squre3.x -= 2;
      squre3.y -= 1;

      squre2.x -= 2;
      squre2.y -= 1;

      squre4.x += 2;
      squre4.y += 1;

      squre1.x += 2;
      squre1.y += 1;
     }
    }
    ctx.clearRect(0,0,canvas.width,canvas.height);
    /*重绘方块*/
    if(for_index == 1 || for_index == 2){
     draw_squre(squre4);
     draw_squre(squre1);
     draw_squre(squre3);
     draw_squre(squre2);
    }

    /*重绘阴影*/
    get_shaow_pos();
    for(var i in shaow_begin){
     draw_shaow(shaow_begin[i]);
    }
   },1000 / 24);

由于在高分屏下绘制有点模糊,于是引入了hidpi-canvas.js

github地址:https://github.com/lzuntalented/lzLoading

本地下载:http://xiazai.3water.com/201707/yuanma/lzLoading(3water.com).rar

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
用JavaScript调用WebService的示例
Apr 07 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 #Javascript
vue一步步实现alert功能
Jul 05 #Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 #Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 #Javascript
webpack教程之webpack.config.js配置文件
Jul 05 #Javascript
webstorm添加vue.js支持的方法教程
Jul 05 #Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 #Javascript
You might like
PHP数据过滤的方法
2013/10/30 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
python远程登录代码
2008/04/29 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
军训心得体会
2013/12/31 职场文书
文明寄语大全
2014/04/11 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python