利用canvas实现的加载动画效果实例代码
作者:可我不爱聪明 发布时间:2023-06-29 22:49:51
标签:canvas,加载动画效果
前言
以前在浏览文章时,看到过一个Android的加载效果,觉得挺好看的,于是自己就模仿了一个。下面话不多说,我们直接来看看详细的介绍吧。
运行效果图
分析下这个效果:
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.jb51.net/201707/yuanma/lzLoading(jb51.net).rar
来源:http://www.jianshu.com/p/2b2bdb90d58a
0
投稿
猜你喜欢
- 一直在用JS写ASP,也不是特别原因,只是当初学的是JS,后来学ASP时知道ASP也可以用JS写,就没去学VBS.前几个月刚学ASP的时候找
- 导语:排版是一门艺术,也是一门技巧。我们每天都能在报纸,书籍等各种媒介上看到排版,或精美,或丑陋。如何能在准确传递信息的同时,又能排出精美的
- 同时在线访问量继续增大 对于1G内存的服务器明显感觉到吃力严重时甚至每天都会死机 或者时不时的服务器卡一下 这个问题曾经困扰了我半个多月My
- 朋友去面试。对方问他:说说你之前做的那个站,有什么地方好的?朋友就说:用户体验比别的站好。对方又问:你怎么知道用户体验比别的好?朋友于是又磕
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- asp正则表达式检测字符串是否是数字及字母。<% '函数:CheckString(strng) '
- 层叠样式表(css)是Web设计的一种语言,CSS的下一代版本CSS3已经蓄势待发。你是否可望开始使用它们却又不知从何下手呢?虽然还有一些新
- 今天摸了半天摸出来的,虽然这里没啥人玩ASP,不过也是win7的问题,发发当备份问题1.An error occurre
- HTML与CSS在Flash中的应用:不小心看到同事Den在弄个小东西:在Flash里使用HTML和CSS,代码是这样:var m
- 日常我们见的多的水印大都是做到图片里的,我依据html元素的css position定位作出这个 * 印,供大家参考<!DOCTYPE
- 我为一大型网站做了一个论坛,也顺利通过了测试。由于是第一次做这方面的数据库,我不知道比其它网站上数据库差距有多大,是不是够优化。能推荐或介绍
- ajax开发中, 常遇到下面的几种情况: 1 服务端需要返回一段普通文本给客户端 2 服务端需要返回一段HTML代码给客户端 3 服务端需要
- 看lifesinger的《由Kimi找茬想到的》,我想到的:1、 我不同意将“合并付款”定调在“很多卖家都需要”。这个“很多”在卖家里面大概
- Google Chrome 的发布,使我们更加的注重基于 WebKit 核心的浏览器的表现情况,但我们很多时候“不小心”就会出现
- 本期薯片会的目的是讨论人物角色在设计中如何应用的问题。围绕了以下几个问题开展了讨论:1、 角色能干什么?2、 包含哪
- JavaScript Length 字符长度函数,在很多时间我们会用length函数了,因为你得前台判断一个用户输入
- 第一步肯定是打上SQL SERVER最新的安全补丁.如果这一步都没有做好,那我们也没有继续下去的必要了。 第二步是修改默认的1433端口,并
- JavaScript中的字符串函数没有像VBScript\ASP中的内部函数那么全.不能像VB那样直接利用left和right函数来实现对字
- 我看见朋友可以把数据库的记录输出到页面表格上去,觉得很有用。这是怎么做的啊?见下:dbtable.asp<html><he
- 第一步:安装SQL200,并启动SQL2000。到网上下载SQL2000,并安装完毕。( * 作系统是XP,装的是SQL个人版),按照下面所示