利用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 相关文章推荐
一段批量给页面上的控件赋值js
Jun 19 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
分享网页检测摇一摇实例代码
Jan 14 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
浅谈Vue 数据响应式原理
May 07 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 Javascript
图解JS原型和原型链实现原理
Sep 15 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
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
PHP 无限级分类
2017/05/04 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
详解python3中的真值测试
2018/08/13 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
社区敬老月活动总结
2015/05/07 职场文书
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
python数据处理之Pandas类型转换
2022/04/28 Python