美文网首页opengl
Android基于Shader的图像处理(8)-仿抖音缩放特效

Android基于Shader的图像处理(8)-仿抖音缩放特效

作者: andev009 | 来源:发表于2018-11-16 17:55 被阅读181次

    完整代码查看# AndroidShaderDemo下的ScaleRender

    之前用Shader渲染出静止的图片,这里让图片动起来,模仿抖音里放大缩小的特效。原理就是使用缩放矩阵,达到放大缩小作用。因此vertex shader和之前的不同,物体坐标要经过缩放矩阵处理,缩放矩阵定义为uMvpMatrix, shader代码如下:

    void main()
    {
        v_TextureCoordinates = a_TextureCoordinates;
        gl_Position = uMvpMatrix * a_Position;//使用uMvpMatrix达到缩放效果
    }
    

    定义好了vertex shader,下面画图,和普通render不同的是,每次调用onDrawFrame方法时,要给缩放矩阵赋予新的缩放因子,然后再把缩放矩阵传给vertex shader。
    这里把上述过程封装成方法prepareDraw:

    private void prepareDraw(){
            Matrix.setIdentityM(scaleMatrix, 0);
    
            float progress;
            if (curFrame <= MiddleFrame) {
                progress = curFrame * 1.0f / MiddleFrame;
            } else {
                progress = 2f - curFrame * 1.0f / MiddleFrame;
            }
            float scale = 1f + progress * 0.3f;
            Matrix.scaleM(scaleMatrix, 0, scale, scale, scale);
            glUniformMatrix4fv(scaleAnimationProgram.getMvpMatrixLocation(), 1, false, scaleMatrix, 0);
    
            curFrame++;
            if(curFrame > MaxFrame){
                curFrame = 0;
            }
        }
    

    因为glSurfaceView默认的RenderMode是RENDERMODE_CONTINUOUSLY,所以Render的onDrawFrame方法会不停调用,用curFrame记录每次调用,就可以改变缩放因子了。
    最终效果如下:


    scale_animation.gif

    相关文章

      网友评论

        本文标题:Android基于Shader的图像处理(8)-仿抖音缩放特效

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