雷达扫描小动画

ScanView

一个类似雷达扫描的动画

效果.gif

效果图下面的阴影是录制gif时窗口的阴影,不要在意。

分析下这个动画,底图是一个圆形的图片,图片上层盖了一个贴边的内圈圆环,然后中心有一个小圆再不断的绕圈扫描,小圆与圆环之间还有一定的间隔。

圆环的实现是这样的,以一个大圆跟一个小圆相交,裁去相交的那部分,剩下的就是我们要的圆环

        int saved = canvas.saveLayer(null, null, Canvas.ALL_SAVE_FLAG);
//        //绘制Dst圆
        canvas.drawBitmap(xfermod_dstBitmap, 0, 0, mPaint);
//        //设置Xfermode
        mPaint.setXfermode(porterDuffXfermode);
          //绘制Src圆
        canvas.drawBitmap(xfermod_srcBitmap, 0, 0, mPaint);
        //绘制完成需要置null
        mPaint.setXfermode(null);
        //缓冲完毕复原
        canvas.restoreToCount(saved);

要注意的是,这种实现方式需要使用离屏缓冲,否则无法达到预期效果,也就是这两行代码

 int saved = canvas.saveLayer(null, null, Canvas.ALL_SAVE_FLAG);
 canvas.restoreToCount(saved);

另外在实现中发现,只有在两个bitmap相处理的时候,才有

PorterDuff.Mode.jpg

这个实现的效果。

所以在处理圆环的时候,我是创建了两个bitmap的。
假如是直接画两个同心圆,

        canvas.drawCircle(centerX, centerY, middleRadius, mPaint);
        mPaint.setXfermode(porterDuffXfermode);
        mPaint.setColor(Color.parseColor("#33000000"));
        canvas.drawCircle(centerX, centerY, outerRadius, mPaint);Circle(centerX, centerY, outerRadius, mPaint);

实际是这样的。

示例.png

最后是扫描的动画效果,比较简单,不停的加大扇形的绘制角度就行了。

项目地址

推荐阅读更多精彩内容

  • Category/Util sstoolkit一套Category类型的库,附带很多自定义控件 功能不错~ BFK...
    质跃阅读 1,295评论 0 3
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 8,859评论 4 48
  • 1 自从上次完成了自己的真情告白后,当时张佳明没有回应,但是工作上配合的很积极,他愿意为她分担工作,也许只有工作是...
    郝晶读书会阅读 1,411评论 63 66
  • 又是一个九月,这是我在这个城市度过的第四个九月。平淡无奇的日子早已消匿了初次见面的惊讶与新奇。我似乎都快忘了...
    橘子酱啊阅读 147评论 0 1
  • 风是他的来历,山是他的坚守,河是他的追寻。他叫兰州,是一座城,也是一首歌、一支烟。是热气腾腾的一碗牛大,也是水流涓...
    师一墨阅读 1,522评论 13 24
  • 《成功不只是一个结果》 原文:你需要区分清楚以下两点:一个是为了胜利而想要成功的冲动;另一个是实现可以充实自己和他...
    临淄茂业DDM黄红阅读 85评论 0 0