加入收藏 | 设为首页 | 会员中心 | 我要投稿 PHP编程网 - 湛江站长网 (https://www.0759zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

一个非常漂亮的自定义Loading,有加载成功和失败两种状态

发布时间:2016-07-21 00:43:21 所属栏目:建站 来源:简书网
导读:我一哥们公司做智能设备的,该动画用在手机和家中网络连接时用,他让我看了下需求。刚看到这动画时感觉产品UI设计的不错,想着试试。昨天开始做的,本来感觉很简单,但做起

你要用的地方

NiceLoadingView niceLoading = (NiceLoadingView) findViewById(R.id.nice_loading);
……
//开始连接时
niceLoading.start();
……
//连接成功时
niceLoading.success();
……
//连接失败时
niceLoading.failed();

3.我怎么实现的!

仔细看效果图可以得出:

1、有6个小圆依次从屏幕左侧移入屏幕中间,然后又依次从屏幕中间移出屏幕右侧。

2、中间有个大圆在随着小球的依次靠近慢慢变大,离开慢慢变小;注意在左侧第一个小圆到达中间时才出现大圆,在最后一个小圆准备向右侧移动时消失;大圆的半径在小圆半径和大圆半径之间。

3、不管何时得到成功和失败的状态,动画终止时都是在小圆依次从左边进入中间后。

4、动画完成后显示成功/失败图片和大圆。

1. 6个小圆的运动

我是这样想的:当第1个小圆移动到widthSpecSize/4(widthSpecSize 为控件的宽度)时第2个小圆开始移动、当第2个小圆移动到widthSpecSize/4时第3个小圆开始移动......当第5个小圆移动到widthSpecSize/4 时第6个小圆开始移动、第6个小圆移动到widthSpecSize/2 时继续移动、当第6个小圆移动到widthSpecSize 3/4时第5个小圆开始移动......当第2个小圆移动到widthSpecSize 3/4时第一个小圆开始移动、最后第1个小球移出屏幕右侧,到此为一个循环。

假设有一个位移变量moveX,moveX在不断增加,其变化范围为(a,b);可以看出按照我的想法,第1个小圆在范围的两边时开始移动、第6个小球在变化范围的中间部分开始移动。

我们可以继续假设变化范围为(-a,a),这样第1个小圆在范围的绝对值大时开始移动、第6个小球在变化范围的绝对值小时开始移动;其实这种重复的动作很容易想到绝对值控制

找张纸画下很容易得到moveX的变化范围在(-widthSpecSize 7/4 , widthSpecSize 7/4)之间。

一个非常漂亮的自定义Loading,有加载成功和失败两种状态

自己画的图,有点丑

对照图很快可以得出下面代码

if (Math.abs(moveX) > widthSpecSize * 5 / 4) {
    XPoint = (moveX < 0) ? XPoint = widthSpecSize * 7 / 4 - Math.abs(moveX) : 
    widthSpecSize - widthSpecSize * 7 / 4 + Math.abs(moveX);
    canvas.drawCircle(XPoint, heightSpecSize / 2, radiusSmall, mPaint);
}
if (Math.abs(moveX) > widthSpecSize && Math.abs(moveX) < widthSpecSize * 3 / 2) 
{
    XPoint = (moveX < 0) ? XPoint = widthSpecSize * 3 / 2 - Math.abs(moveX) : 
    widthSpecSize - widthSpecSize * 3 / 2 + Math.abs(moveX);
    canvas.drawCircle(XPoint, heightSpecSize / 2, radiusSmall, mPaint);
}
if (Math.abs(moveX) > widthSpecSize * 3 / 4 && Math.abs(moveX) < widthSpecSize * 5 / 4) 
{
    XPoint = (moveX < 0) ? XPoint = widthSpecSize * 5 / 4 - Math.abs(moveX) :
     widthSpecSize - widthSpecSize * 5 / 4 + Math.abs(moveX);
    canvas.drawCircle(XPoint, heightSpecSize / 2, radiusSmall, mPaint);
}
if (Math.abs(moveX) > widthSpecSize / 2 && Math.abs(moveX) < widthSpecSize) 
{
    XPoint = (moveX < 0) ? XPoint = widthSpecSize - Math.abs(moveX) :
     widthSpecSize - widthSpecSize + Math.abs(moveX);
    canvas.drawCircle(XPoint, heightSpecSize / 2, radiusSmall, mPaint);
}
if (Math.abs(moveX) > widthSpecSize / 4 && Math.abs(moveX) < widthSpecSize * 3 / 4) 
{
    XPoint = (moveX < 0) ? XPoint = widthSpecSize * 3 / 4 - Math.abs(moveX) : 
    widthSpecSize - widthSpecSize * 3 / 4 + Math.abs(moveX);
    canvas.drawCircle(XPoint, heightSpecSize / 2, radiusSmall, mPaint);
}
if (Math.abs(moveX) > 0 && Math.abs(moveX) < widthSpecSize / 2) {
    XPoint = (moveX < 0) ? XPoint = widthSpecSize / 2 - Math.abs(moveX) :
     widthSpecSize - widthSpecSize / 2 + Math.abs(moveX);
    canvas.drawCircle(XPoint, heightSpecSize / 2, radiusSmall, mPaint);
}

(编辑:PHP编程网 - 湛江站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!