Android实现仿iOS图标下载View动画效果,保准看明白【附源码】_top级移动开发

因为时间比较紧张,8 天的时间完成环信客服模块的接入,就直接用了环信提供的?UI?控件,但是一些细节的部分,?UI?还是会给出设计图,按照设计图完成最终效果。

UI那边直接让我参考?IOS的实现效果:

Android实现仿iOS图标下载View动画效果,保准看明白【附源码】_top级移动开发

UI效果

[](

)最终效果

Android实现仿iOS图标下载View动画效果,保准看明白【附源码】_top级移动开发

最终效果

完整的代码请看:

[https://github.com/xiaweizi/DownloadLoadingView](

)

[](

)功能分析

面对这样的需要应该怎么实现呢?其实实现的方式可能不止我想的这种,我就讲述一下我是如何处理的。

Android实现仿iOS图标下载View动画效果,保准看明白【附源码】_top级移动开发

预览图

首先,可以分成三部分:

  • 半透明的背景

  • 全透明的环

  • 实心全透明的弧

那怎么实现背景半透明,而圆环和弧又是全透明的。顿时有个想法,要是两张图片重叠的部分能被抠出掉,也就是变成全透明,那岂不是非常容易就实现了。

圆环和弧既然是盖在了背景上,理当直接变成透明。那?Android?有对应处理的?API吗?答案是肯定的。?setXfermode()?用于设置图像的过度模式,其中?PorterDuff.Mode.CLEAR?为清除模式则可以实现上述的效果。

[](

)具体实现

[](

)一系列的初始化

 public DownloadLoadingView(Context context, AttributeSet attrs) {      super(context, attrs);      TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.DownloadLoadingView);      mRadius = typedArray.getDimension(R.styleable.DownloadLoadingView_radius, RADIUS_DEFAULT);      mStrokeWidth = typedArray.getDimension(R.styleable.DownloadLoadingView_strokeWidth, STROKE_WIDTH_DEFAULT);      mMaxProgress = typedArray.getInteger(R.styleable.DownloadLoadingView_maxProgress, MAX_PROGRESS_DEFAULT);      mRoundRadius = typedArray.getDimension(R.styleable.DownloadLoadingView_roundRadius, ROUND_RADIUS_DEFAULT);      mBackgroundColor = typedArray.getColor(R.styleable.DownloadLoadingView_backgroundColor, getResources().getColor(R.color.bg_default));      Log.i(TAG, "radius:" + mRadius);      typedArray.recycle();      setLayerType(View.LAYER_TYPE_SOFTWARE, null);//关闭硬件加速      paint = new Paint(Paint.ANTI_ALIAS_FLAG);  } 

记得需要关闭硬件加速,不然会没有效果。

[](

)绘制背景

 paint.setColor(mBackgroundColor);  paint.setStyle(Paint.Style.FILL);  RectF round = new RectF(0, 0, getWidth(), getHeight());  canvas.drawRoundRect(round, mRoundRadius, mRoundRadius, paint);  设置背景颜色,样式为填充,绘制圆角矩形 

设置背景颜色,样式为填充,绘制圆角矩形

[](

)绘制圆环

 paint.setColor(Color.RED);  paint.setStrokeWidth(mStrokeWidth);  // 采用 clear 的方式  paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));  paint.setStyle(Paint.Style.STROKE);  canvas.drawCircle(getWidth() / 2, getHeight() / 2, mRadius, paint); 

圆环的颜色可以随意设置,毕竟最后会被抠除掉,

设置?PorterDuff.Mode.CLEAR?类型模式绘制圆环

[](

)绘制圆

 paint.setStyle(Paint.Style.FILL);float?sweepAngle?=?360?*?mProgress?/?mMaxProgress;RectF?rectF?=?new?RectF(getWidth()?/?2?-?mRadius,?getHeight()?/?2?-?mRadius,?getWidth()?/?2?+?mRadius,?getHeight()?/?2?+?mRadius);canvas.drawArc(rectF,?-90,?sweepAngle,?true,?paint);//?记得设置为?null?不然会没有效果paint.setXfermode(null); 

最后

Android学习是一条漫长的道路,我们要学习的东西不仅仅只有表面的 技术,还要深入底层,弄明白下面的 原理,只有这样,我们才能够提高自己的竞争力,在当今这个竞争激烈的世界里立足。

人生不可能一帆风顺,有高峰自然有低谷,要相信,那些打不倒我们的,终将使我们更强大,要做自己的摆渡人。

我把自己这段时间整理的Android最重要最热门的学习方向资料放在了我的CodeChina上,里面还有不同方向的自学编程路线、面试题集合/面经、及系列技术文章等。

资源持续更新中,欢迎大家一起学习和探讨。

本站由小牛团队全力维护,小牛十年了,大家已经步入中年 。本站源码全部经过团队成员测试并调试,价格可能比其它网站略贵几元钱,不解释!
小牛资源 » Android实现仿iOS图标下载View动画效果,保准看明白【附源码】_top级移动开发

发表评论

全站资源亲测可用,价格略高几元,不解释

立即查看 了解详情