Transiciones de imagen de Android y efectos de carrusel, todo lo que quieres está aquí

Usando OpenGL como un efecto de transición de imagen o un carrusel de imágenes, puede lograr muchos efectos sorprendentes.

GLTransiciones

Los amigos que están familiarizados con el desarrollo de OpenGL ya conocen muy bien el proyecto GLTransitions.Este proyecto se utiliza principalmente para recopilar varios efectos de transición GL y sus códigos de implementación GLSL, y los desarrolladores pueden trasplantarlos fácilmente a sus propios proyectos.

Dirección del sitio web del proyecto GLTransitions: gl-transitions.com/gallery

El proyecto GLTransitions tiene casi 100 efectos de transición, que se pueden usar fácilmente en el procesamiento de video. La mayoría de los efectos de transición incluyen métodos comunes de procesamiento de imágenes, como fusión, detección de bordes, erosión y expansión, de fácil a difícil. **

Para los estudiantes que desean aprender GLSL, no solo pueden comenzar rápidamente, sino también aprender algunos métodos de procesamiento de imágenes de alto nivel para la implementación de GLSL, lo cual es muy recomendable.

Además, GLTransitions también admite la edición en línea y la ejecución en tiempo real de scripts GLSL, lo cual es muy conveniente para aprender y practicar.

Android OpenGL cómo trasplantar efectos de transición

Dado que los scripts GLSL son básicamente universales, los efectos de GLTransitions se pueden trasladar fácilmente a varias plataformas.Este artículo utiliza el proyecto HelloWorld de GLTransitions para presentar varios puntos a los que se debe prestar atención al trasladar los efectos.

El proyecto HelloWorld de GLTransitions es un efecto degradado de mezcla:

// transition of a simple fade.
vec4 transition (vec2 uv) {
  return mix(
    getFromColor(uv),
    getToColor(uv),
    progress
  );
}

复制代码

transición es una función de transición, similar en función a una función de muestreo de textura, genera rgba de acuerdo con las coordenadas de textura uv, getFromColor (uv) significa muestrear la textura de origen, getToColor (uv) significa muestrear la textura de destino, genera rgba, el progreso es un 0.0 ~ 1.0 La cantidad de gradiente entre valores, mix es la función de mezcla integrada glsl, que mezcla 2 colores según el tercer parámetro.

De acuerdo con la información anterior, solo necesitamos preparar 2 texturas en el sombreador, un valor de gradiente (uniforme) con un valor de 0.0~1.0, el script de sombreado correspondiente se puede escribir como:

#version 300 es
precision mediump float;
in vec2 v_texCoord;
layout(location = 0) out vec4 outColor;
uniform sampler2D u_texture0;
uniform sampler2D u_texture1;
uniform float u_offset;//一个取值在 0.0~1.0 的（uniform）渐变量

vec4 transition(vec2 uv) {
  return mix(
    texture(u_texture0, uv);,
    texture(u_texture1, uv);,
    u_offset
  );
}

void main()
{
	outColor = transition(v_texCoord);
}

复制代码

Establecer texturas y variables en el código:

glUseProgram (m_ProgramObj);

glBindVertexArray(m_VaoId);

glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, m_TextureIds[0]);
GLUtils::setInt(m_ProgramObj, "u_texture0", 0);

glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, m_TextureIds[1]);
GLUtils::setInt(m_ProgramObj, "u_texture1", 1);

GLUtils::setFloat(m_ProgramObj, "u_offset", offset);

glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, (const void *)0);
复制代码

La demostración de este artículo implementa un efecto de cambio de página de carrusel de imágenes. Para ver el código de implementación de Android, consulte el proyecto:

github.com/githubhaoha…

El trasplante de efecto de transición no es muy simple, pruébalo.