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

477 阅读1分钟

0.前言

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

1.使用

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

 <com.skateboard.corronisonview.CorronisonView
        app:duration="10"
        android:id="@+id/corronisonView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

其中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