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

作者: a49f87ef5d4f | 来源:发表于2018-09-17 13:57 被阅读43次

    0.前言

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

    image

    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

    相关文章

      网友评论

        本文标题:Android自定义View---腐蚀面具

        本文链接:https://www.haomeiwen.com/subject/djjlnftx.html