Android自定义View---腐蚀面具

0.前言

最近一直在研究opengl，在android应用中可以很好的进行细粒度的对展示的效果进行控制，今天这个腐蚀面具的效果就是基于opengl es来做的。话不多说，先看效果图

image

1.使用

使用很简单，在布局文件中直接使用CorronisonView

其中duration代表了销毁时间。
然后在MainActivity里设置bitmap

corronisonView.setBitmap(BitmapFactory.decodeResource(resources,R.drawable.icon))

2.代码

关于opengl es在android中的使用这里就不细说了，整个过程其实就是利用了一个纹理来显示图片，然后随着时间的推移舍弃一些片段不进行渲染。这里主要来看一下片段着色器的代码

#version 300 es
precision mediump float;
in vec2 texCoord;
out vec4 fragColor;
uniform sampler2D sampler;
uniform float percent;
void main()
{
   vec4 samplerColor=texture(sampler,texCoord);
   float size=samplerColor.x+samplerColor.y+samplerColor.z+samplerColor.w;
   float curSize=4.0*percent;
   if(size<=curSize)
      discard;
   fragColor=samplerColor;
}

随着时间的推移不停的设置percent，然后计算当前颜色的所有颜色分量的和如果小于总分量（也就是4.0）*percent的值的话，就舍弃该片段，不进行渲染。
在CorronisonView中设置时间动画，不停修改CorronisonViewRender中percent的值

 private fun prepareTimeAnimator()
    {
        val animator = ValueAnimator.ofInt(time)
        animator.duration = time.toLong() * 1000
        animator.addUpdateListener(ValueAnimator.AnimatorUpdateListener {
            render?.percent = it.animatedFraction
        })
        this.animator = animator
    }

3最后

github

关注我的公众号

image