Android开发：高仿QQ，发送图片时炫酷的加载效果

最新推荐文章于 2021-08-28 17:21:30 发布

像程序那样思考

最新推荐文章于 2021-08-28 17:21:30 发布

阅读量424

点赞数 2

分类专栏：安卓程序员

本文链接：https://blog.csdn.net/weixin_45258969/article/details/103562677

版权

本文介绍了如何在Android开发中模仿QQ发送图片时的炫酷加载效果，包括进度条带光晕效果和圆圈扩散至全图的动画。详细讲解了裁剪canvas、绘制背景、进度、光晕以及最终揭示图片的实现步骤，并提供了完整的代码示例。

摘要由CSDN通过智能技术生成

之前看到qq 的图片发送效果很酷炫，很吸引人，不过现在这个效果好像没有了。试了几次,决定试试实现。大致想了下，实现效果还不错

需要实现的效果

一图胜千言，看图如下：

怎样实现呢？

首先从图中看分两部分，一部分是进度条带光晕得效果。第二部分是圆圈扩散到整个图片，到显示完整图片的过程。接下来一步一步跟着代码分析实现。

1、绘制的范围包括图片显示都在圆角矩形内，所以首先要裁剪canvas到圆角矩形。

        val path = Path()
        canvas.save()
        path.addRoundRect(RectF(0f, 0f, width.toFloat(), height.toFloat())
                , round, round, Path.Direction.CW)
        canvas.clipPath(path)

先保存画布，save()到最后要canvas.restore()。因为显示图片，可以有两种选择，第一种：自己绘制图片，通过drawable得方式。第二种：继承ImageView 同时还可以获得ImageView提供的各种属性，scaleType之类。本质上ImageView也是通Drawable实现。IamgeView还帮我们处理了测量的狂傲，所以有什么理由不选择继承呢。然后绘制图片只有简单一行代码，再裁剪画布之后：