ScaleProgressBar Loading效果

这个demo是鸣人叫我做的效果,大家用的时候根据实际需要再调整参数。

先看效果图:

主要构思:当progress到最大值的时候触发动画效果,效果都由canvas画布上进行。

主要代码:

@Override
	protected void onDraw(Canvas canvas) {
		int halfWidth = getWidth() / 2;
		int halfHeight = getHeight() /2;
		//this way to draw the path for progress
		if(progress<MAX_PROGRESS){
			canvas.drawColor(COLOR_TRANSLUCENT);
			pRectF.top = halfHeight - RADIUS_PROGRESS;
			pRectF.bottom = halfHeight + RADIUS_PROGRESS;
			pRectF.left = halfWidth - RADIUS_PROGRESS;
			pRectF.right = halfWidth + RADIUS_PROGRESS;
			canvas.drawArc(pRectF, -90, ((float)progress/(float)MAX_PROGRESS)*360, false, pPaint);
			canvas.save();
		//this way to draw the images when animation start
		}else{
			int alter = progress-MAX_PROGRESS;
			Path path = new Path();
			path.addRect(0, 0,getWidth(),getHeight(),Path.Direction.CW);
			path.addCircle(halfWidth, halfHeight,RADIUS_BIG_CIRCLE+alter*ALTER_LENTH,Path.Direction.CCW);
			canvas.drawPath(path, squarePaint);
			canvas.drawCircle(halfWidth, halfHeight, RADIUS_PROGRESS-alter*ALTER_LENTH, sCirclePaint);
			canvas.save();
		}
		super.onDraw(canvas);
	}

P.S
感谢7heaven告诉Path的用法

下载地址 :https://github.com/arjinmc/ScaleProgressBar

时间: 2024-10-01 05:27:24

ScaleProgressBar Loading效果的相关文章

Jquery Easy UI 实现页面的Loading效果(类似于Android的ProgressDialog)

前言 很常用的一种前端效果,比如当用户点击网页的某个按钮发送了一条异步请求,如果响应时间过长容易导致用户重复点击,一方面影响用户体验一方面容易造成不必要的服务端压力,Easy UI有现成的mask样式,简单封装一下就可以使用,之前查阅搜集了相关资料和文章,发现都介绍的都不是很完整,所以本篇blog就完整的记录一下通过Easy UI快速实现这种效果以及如何集成到项目中. 引入.封装和调用 首先当然是在我们的项目中集成jquery以及easyui的相关资源包,除了jquery的核心js文件,easy

CSS3实现8种Loading效果【第二波】

今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊重一下作者! 第一种效果: 代码如下: <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></sp

自动播放——幻灯片缓冲效果&amp;&amp;带Loading效果的图片切换&amp;&amp;移动效果(按轨迹移动)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

CSS3实现8种Loading效果【二】

CSS3实现8种Loading效果[二] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></sp

Loading效果 UIActivityIndicatorView

//初始化: UIActivityIndicatorView* indicator = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)]; //设置显示样式,见UIActivityIndicatorViewStyle的定义 indicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyleWhiteLarge; //设置显示位置 [i

网页Loading效果

问题描述:由于项目要求在页面提交以及加载的时候,有短暂的卡顿,需要用loading过渡. 1.下一个页面加载的时候实现: base-loading.js //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px

javscript 实现iframe加载内容页出现LOADING效果

<div id="load" align="center"> <img src="http://sc.cnwebshow.com/upimg/allimg/070707/01294420.gif" /> loading </div> <!-- 首先放一个div,用做loading效果 --> <iframe id="demo" src="http://www.**

仿易讯客户端loading效果

下面来实现一个loading效果.具体效果如下: 首先对这个效果进行拆分,它由以下部分组成: 1 一个"闪电"样式的图案: 2 "闪电"图案背后是一个圆角矩形; 3 "闪电"图案上面有一层颜色不断"飘过" 拆分完效果后,思考下如何实现.下面是我的思考过程. 1 android sdk并没有提供这样的控件,很显然是需要自定义控件: 2 很显然是一个View而不是ViewGroup,所以可以继承View; 3 重点是onDraw的

vue实现ajax滚动下拉加载,同时具有loading效果

<!doctype html> <html> <head> <meta charset="utf-8"> <title>vue测试ajax的使用</title> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.