类似 Instagram 径向羽化透露手指底部内容的 FingerTransparentView

泡在网上的日子 / 文 发表于2015-08-06 16:51 次阅读 模糊,羽化

原文出处:http://drakeet.me/fingertransparentview 

前不久群里有人说有木有人知道怎么实现「类似 Instagram 径向模糊透露手指底部内容」的效果,用过 Ps 的我,当时就知道这其实叫羽化,因为要实时用算法羽化其实挺麻烦的,效率也不见得好,于是我当即很快提供了一个思路便是通过 Ps 做一张中心透明,边缘羽化的图片,再结合 Android 自定义 View 常用的 Canvas 与 Paint 这两个类的混合模式 Xfermode,在白板上挖出一个能容纳这张羽化图片的洞,混合去除,再将羽化图片填充进去即可。

说来抽象,结果便是如右 GIF 图所示。正好那天比较闲,想得快,做得也快,一个钟头完全靠着自己就几乎完美实现了。

Maven:

dependencies {
    compile 'me.drakeet.fingertransparentview:fingertransparentview:1.0.1'
}

不过,一般人可能不会用到这个东西,之所以在这边写出来,觉得它还是挺不错的一个自定义 View 教程,开发者可以看看源码学习下也不错,主要可以学到的内容有:

  • 双指缩放 Bitmap

  • 触摸事件分发与传递

  • Android 提供的混合绘图接口 Xfermode(除了我使用到的一种,另外还有17种混合模式,非常强大)

  • 自定义 View 的一些适当流程

源代码:https://github.com/drakeet/FingerTransparentView

遗留小问题:眼尖的同学可能回发现使劲看可以看得出图片边缘,这主要是 baseColor 我偷懒直接使用 Color.WHITE 衔接不完美导致的,可以通过调整这个变量获得完美衔接,或者重新 P 一张羽化图片也行。


收藏 赞 (2) 踩 (0)
上一篇:Cool Android Apis 整理(一)
Foreword 本文主要整理 Cool Android Apis 。 整理来源 Dan Lew 的 Android Tips Round-Up 系列文章。 尤其感谢 Gracker 对上面系列文章的 翻译和部分解释 。 知乎问题: Android开发中,有哪些让你觉得相见恨晚的方法、类或接口? 所以说严格来讲这篇文章基
下一篇:PercentRelativeLayout 源码解析
文章出处: http://www.jianshu.com/p/05bc040841cd com.android.support:percent:22.2.0:google 出了个包来支持按父控件百分比的显示. 我们Gradle 导入 compilecom.android.support:percent:22.2.0 看一下,其实这个库特别简单只有3个 class 类 declare-styl