概述

本自定义动画进度酷炫View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果。 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进度颜色。

详细

一、概述

本自定义动画进度酷炫View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果。

支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进度颜色。

直接看下面的效果图吧。

二、效果图

废话不说,先来看看效果图吧~~

三、实现原理方案

1、自定义View-XCLoadingImageView,继承ImageVIew来实现,这样就不用自己再处理drawable和测量的工作内容。

2、根据蒙层颜色创建一个蒙层bitmap,然后根据这个bitmap来创建一个ClipDrawable,最后利用ClipDrawable的level属性

来裁剪显示区域进度,从而达到加载进度的效果。

3、最后利用属性动画技术或ClipDrawable的setLevel()方法来达到进度的效果。

四、自定义加载进度效果XCLoadingImageView的具体实现

1、初始化需要用到的数据变量以及画笔以及属性

private Paint mImagePaint;    private int mImageHeight, mImageWidth;    private boolean mIsAutoStart = false;    private int mMaskColor = Color.TRANSPARENT;    private ClipDrawable mClipDrawable;    private Drawable mMaskDrawable;    private int maskHeight;    private int mProgress;    private ObjectAnimator mAnimator;    private long mAnimDuration = 2500;    private float mScaleX, mScaleY;    private int mGravity = Gravity.BOTTOM;    private int mOrientaion = ClipDrawable.VERTICAL;    private int mMaskOrientation = MaskOrientation.BottomToTop;    //Loading oriention
public static final class MaskOrientation { public static final int LeftToRight = 1; public static final int RightToLeft = 2; public static final int TopToBottom = 3; public static final int BottomToTop = 4;
}/**
* initial attributes */
private void initAttrs(Context context, AttributeSet attrs) { if (attrs == null) { return;
}
TypedArray t = context.obtainStyledAttributes(attrs, R.styleable.XCLoadingImageView);
mMaskColor = t.getColor(R.styleable.XCLoadingImageView_mask_color, mMaskColor);
mIsAutoStart = t.getBoolean(R.styleable.XCLoadingImageView_auto_start_anim, mIsAutoStart);
setMaskColor(mMaskColor);
t.recycle();
} /**
* initial paint */
private void init() { if (mImagePaint == null) {
mImagePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mImagePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
}
}

2、初始化蒙层Bitmap以及创建加载进度用的ClipDrawable

private void initMaskBitmap(int maskColor) {
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
Bitmap bgBmp = ((BitmapDrawable) drawable).getBitmap();
mImageWidth = drawable.getIntrinsicWidth();
mImageHeight = drawable.getIntrinsicHeight(); Bitmap fgBmp = Bitmap.createBitmap(mImageWidth, mImageHeight, Bitmap.Config.ARGB_8888);
Canvas fgCanvas = new Canvas(fgBmp);
fgCanvas.drawColor(maskColor); Bitmap bitmap = combineBitmap(bgBmp, fgBmp);
mMaskDrawable = new BitmapDrawable(null, bitmap);
mClipDrawable = new ClipDrawable(mMaskDrawable, mGravity, mOrientaion);
}

3、合并蒙层Bitmap和ImageView的src的drawable为新的Bitmap

/**
* combine tow bitmap to one bitmap
*/
private Bitmap combineBitmap(Bitmap bg, Bitmap fg) {
Bitmap bmp = Bitmap.createBitmap(mImageWidth, mImageHeight, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bmp);
canvas.drawBitmap(bg, 0, 0, null);
canvas.drawBitmap(fg, 0, 0, mImagePaint);
return bmp;
}

4、重写ImageVIew的onDraw()方法来把创建的ClipDrawable绘制到Canvas上

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.save();
canvas.scale(mScaleX, mScaleY);
mClipDrawable.setBounds(getDrawable().getBounds());
mClipDrawable.draw(canvas);
canvas.restore();
}

5、弹通过属性动画或者setLevel,并调用postInvalidate()来重绘,从而达到进度刷新的效果

private void initAnim() {
stopAnim();
mAnimator = ObjectAnimator.ofInt(mClipDrawable, "level", 0, 10000);
mAnimator.setDuration(mAnimDuration);
mAnimator.setRepeatCount(ValueAnimator.INFINITE);
mAnimator.setRepeatMode(ValueAnimator.RESTART);
mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
postInvalidate();
}
});
if (mIsAutoStart) {
mAnimator.start();
}
}
public void setProgress(int progress){
mProgress = progress;
mClipDrawable.setLevel(mProgress * 100);
postInvalidate();
}

五、如何使用该自定义LoadingView控件

1、使用该自定义LoadingView非常简单,和使用普通ImageView差不对哦,只需设置下方向和蒙层颜色即可

public class MainActivity extends Activity {

    @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); XCLoadingImageView imageView2 = (XCLoadingImageView) findViewById(R.id.img2);
imageView2.setMaskOrientation(XCLoadingImageView.MaskOrientation.LeftToRight);
imageView2.setProgress(50);
}
}

六、项目结构目录截图

注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权

Android酷炫加载进度动画的更多相关文章

  1. Android 自定义View修炼-自定义加载进度动画XCLoadingImageView

    一.概述 本自定义View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进度颜色. ...

  2. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

  3. Android ProgressBar实现加载进度条

    progressBar Android进度条组件.   progressBar的关键属性:      android:max="100"     最大显示进度条      andr ...

  4. 兼容ie10及以上css3加载进度动画

      html <div class="spinner">   <div class="rect1"></div>   < ...

  5. 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

    之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

  6. 页面预加载loading动画,再载入内容

    默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...

  7. pace.js和NProgress.js两个加载进度插件的一点小总结

    这两个插件都是关于加载进度动画的,应该说各有特点吧,最起码对我来说是各有优势的.今天一天就捣鼓了加载进度动画,也研究了大量的(也就这两个)加载进度动画,也算对加载进度动画有了一个初步的了解了吧. NP ...

  8. 炫!一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  9. Android ProgressDialog 加载进度

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

随机推荐

  1. 21.多源最短路(floyd算法)

    时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 已知n个点(n<=100),给你n*n的方阵,a[i,j] ...

  2. [转]Intent和IntentFilter详解

        Intent   Android中提供了Intent机制来协助应用间的交互与通讯,Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述,Android则根据此Intent的描 ...

  3. mysql数据库文件简介和应用

    存放目录: 用 whereis my.cnf 查看mysql配置文件的目录,查看my.cnf的datadir参数可找到mysql数据库文件的存放目录. 本机存放的目录为/var/lib/mysql,进 ...

  4. java 随机数种子

    引子:需要实现每天随机获得一个礼包,且全服玩家随出来的都是同一个. 实现方案:以当前时间是一年的第几天作为random的种子,取1~礼包总个数范围内的随机值. public static int ge ...

  5. PHP 基础函数(一)数组的键名和值

    array_values($arr);  获取数组的值,键名消失,原数组不变,返回转变后的数组:

  6. Git与SVN

    http://www.nowamagic.net/academy/detail/48160207 前面提到,Linus一直痛恨CVS及SVN这些集中式的版本控制系统,为什么呢?Git是分布式版本控制系 ...

  7. mac os颜色拾取工具/软件/器推荐

    软件名:ColorSnappe 目前我用的时1.1.0版本 该工具可以利用alt+command+c快捷键拾取颜色,拾取后可以自动把颜色代码放入剪切板 .我最喜欢它可以生成ios开发的代码,比如选择了 ...

  8. JavaScript如何获取/计算页面元素的offset?

    问题  通过点击一控件,在控件的下面显示一个浮动层,通常的做法是:获取此控件的offset值,再计算出浮动层的top,left等css属性的值,赋值即可. 那么下面就看一下如何获取控件的offset值 ...

  9. IOS开关效果

    有IOS的开关模拟,当然也有MIUI的开关模拟 看到设置选项里面的开关样式,突发奇想地来试试    最终效果如图: <!DOCTYPE html> <html> <hea ...

  10. springboot-application.properties可配置属性总结 (datasource 和 JPA)

    ########################################## ###datasource ########################################## ...