利用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 Excel操作知识点
Apr 24 Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
动态加载js、css的实例代码
May 26 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
Json解析的方法小结
Jun 22 Javascript
js严格模式总结(分享)
Aug 22 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 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中函数前加&符号的作用分解
2014/07/08 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
Javascript 事件流和事件绑定
2009/07/16 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
浅谈Vue.js
2017/03/02 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
小程序实现投票进度条
2019/11/20 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
简单学习Python time模块
2016/04/29 Python
使用Python绘制图表大全总结
2017/02/11 Python
详解python中@的用法
2019/03/27 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
softmax及python实现过程解析
2019/09/30 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
大学系主任推荐信范文
2013/12/24 职场文书
大学辅导员述职报告
2015/01/10 职场文书
Java spring定时任务详解
2021/10/05 Java/Android