AI news

Translate the following blog post title into English, concise and natural. Return plain text only without quotes. Android 动效探索：彻底弄清如何让你的视频更加酷炫

Honghao Wang

20 Nov 2025 — 4 min read

Android Video Animation & OpenGL ES Guide

---

Video Animation — You Might Not Know Where to Start
Introduction to OpenGL ES Concepts
Easy Start — Implementing Video Animation with MediaPlayer
Level Up — Implement Video Animation Using a Custom FFmpeg Player
More Possibilities

---

Overview

In Android mobile video processing, animations and filters are an important way to enhance user experience beyond basic playback.

However, many developers feel uncertain about how to technically implement these effects.

This guide will help you:

Use open-source MediaPlayer or custom FFmpeg players
Leverage OpenGL ES to achieve video animation and filter effects

---

1. Video Animation — Where to Start?

In most cases, you can simply use:

MediaPlayer
VideoView

These can play video files directly from UI design teams.

But sometimes, the requirement is to:

Add an animation between specific frames (e.g., frame 50–100) such as shake or zoom.

Without clear knowledge of video processing pipelines, you might end up frustrated or trying flawed approaches, such as:

Overlaying a View and dynamically displaying screenshots — leading to performance and quality issues.

---

Architecture Overview

Two main solutions emerge:

Solution 1 — MediaPlayer + OpenGL ES Processing

Grab frames from MediaPlayer's pipeline
Apply OpenGL ES transformations

Solution 2 — Custom Player with FFmpeg + OpenGL ES

Process raw decoded frames
Fully control playback & animation logic

---

💡 Tip:

For cross-platform AI-enhanced video animation and distribution, explore AiToEarn官网 — an open-source global AI content monetization platform.

---

2. Introduction to OpenGL ES Concepts

What is OpenGL?

OpenGL (Open Graphics Library) is a cross-platform API for rendering 2D/3D vector graphics.

It:

Focuses entirely on rendering
Uses GPU acceleration for speed
Requires separate handling for input and window management

What is OpenGL ES?

OpenGL ES (Embedded Systems) is a subset of OpenGL designed for mobile and embedded devices.

Versions:

ES 1.x — fixed pipeline (old)
ES 2.x — programmable pipeline (modern, Android ≥ 2.2)

---

Core Concepts

Coordinate System

OpenGL ES uses a right-handed coordinate system:

X-axis: right +, left −
Y-axis: up +, down −
Z-axis: towards viewer +, away −

Camera

Simulates real-world viewing — captures 3D scenes and projects onto 2D surfaces.

Texture

Maps a 2D image onto a 3D surface — like "clothing" for a model.

---

OpenGL ES Flow

Steps:

Surface management — GPU render target
EGL Display — Connection between GL and surface
Renderer — Custom drawing code
Separate Thread — Rendering off main UI thread

---

3. Easy Start — MediaPlayer Video Animation

Step 1: Create GLSurfaceView in Layout

---

Step 2: Initialize OpenGL ES Environment

private void init(Context context) {
    setEGLContextClientVersion(2);
    setEGLConfigChooser(new TransparentConfigChooser());
    setZOrderOnTop(true);
    getHolder().setFormat(PixelFormat.TRANSLUCENT);

    renderer = new VideoRenderer(this);
    setRenderer(renderer);
    setRenderMode(RENDERMODE_WHEN_DIRTY);
}

---

Step 3: Vertex & Fragment Shaders

Vertex Shader

private static final String VERTEX_SHADER =
    "uniform mat4 uMVPMatrix;\n" +
    "attribute vec4 aPosition;\n" +
    "attribute vec2 aTexCoord;\n" +
    "varying vec2 vTexCoord;\n" +
    "void main() {\n" +
    "  gl_Position = uMVPMatrix * aPosition;\n" +
    "  vTexCoord = aTexCoord;\n" +
    "}";

Fragment Shader (External Texture)

private static final String FRAGMENT_SHADER =
    "#extension GL_OES_EGL_image_external : require\n" +
    "precision mediump float;\n" +
    "varying vec2 vTexCoord;\n" +
    "uniform samplerExternalOES uVideoTexture;\n" +
    "void main() {\n" +
    "  gl_FragColor = texture2D(uVideoTexture, vTexCoord);\n" +
    "}";

---

Step 4: MediaPlayer Sync with SurfaceTexture

surfaceTexture = new SurfaceTexture(textureId);
surfaceTexture.setOnFrameAvailableListener(st -> {
    mVideoGLSurfaceView.requestRender();
});

---

Step 5: Animation on Frames

if (animationStarted && frameCount <= ANIMATION_DURATION) {
    float progress = (float) frameCount / ANIMATION_DURATION;
    scaleFactor = 1.0f + (MAX_SCALE - 1.0f) * progress;
}

---

📌 Result: You can now play videos via `MediaPlayer` but intercept frames to apply OpenGL-powered animations.

---

4. Level Up — FFmpeg Custom Player

Building your own player offers:

Broader format support
Full control over frame processing
Cross-platform compatibility (Android/iOS)

---

Key Steps:

Compile FFmpeg (use MSYS2 on Windows)
Create Android C++ project, include `.so` library & headers
Initialize FFmpeg in JNI
Open video, find streams, get codec context
Decode frames
Feed frames into OpenGL for rendering

---

Example: Grayscale Effect in Fragment Shader

const GLchar* VideoDrawer::GetFragmentShader(){
    static const GLchar shader[] =
        "precision mediump float;\n"
        "uniform sampler2D uTexture;\n"
        "varying vec2 vCoordinate;\n"
        "void main() {\n"
        "  vec4 color = texture2D(uTexture, vCoordinate);\n"
        "  float gray = (color.r + color.g + color.b)/3.0;\n"
        "  gl_FragColor = vec4(gray, gray, gray, 1.0);\n"
        "}";
    return shader;
}

---

5. Beyond the Basics — Toward 3D Effects

For complex 3D video effects:

Shader management
Texture loading
Model loading (OBJ/FBX)
Camera control
Lighting (point, directional, PBR)

---

6. Conclusion

Why Use Video instead of GIFs/Property Animations?

Complexity — handles richer effects
Variety — immersive presentations
Flexibility — integrate with editing tools
Business Alignment — tailor to scenarios

---

💡 Pro Tip for Creators:

Combine video effects with AI content automation via AiToEarn官网 to:

Generate content with AI
Publish simultaneously to Douyin, Kwai, WeChat, Bilibili, Rednote, Facebook, Instagram, LinkedIn, Threads, YouTube, Pinterest, X
Track analytics and AI model rankings

---

Final Thought

Whether using MediaPlayer or FFmpeg, the OpenGL ES pipeline is the key to modern Android video animation. Once mastered, your possibilities extend from simple GIF replacements to complex, AI-enhanced cross-platform multimedia experiences.