WebView Transparent Video Visual Enhancement Solution for Frontend Development

This article introduces a self-developed transparent video visual enhancement solution for WebView by the Growth Frontend Team. The solution ensures high-fidelity visual reproduction while requiring less development cost and achieving better frontend performance.

Background: With increasing entertainment elements and rich interactions in Apps, animation effects have become increasingly important for user experience. However, implementing high-quality animations requires high development costs, and there is no universal technical solution. To address this, the industry has developed visual enhancement frontend solutions based on afx transparent video.

Common Animation Solutions and Issues: Existing solutions include frame animation, Lottie, GIF, and video. Frame animation requires large file sizes; GIF only supports 8-bit color with rough image quality; MP4 does not support transparent backgrounds; Canvas/CSS implementations for complex animations are complicated; and animation engines require significant development and design costs.

Implementation Method - Transparent Video: Each video frame can be decomposed into RGB color channels plus an Alpha channel (transparency channel) with values ranging from 0 (completely transparent) to 255 (completely opaque). Since MP4 only contains RGB channels by default, the solution separates the RGB and Alpha channels during video synthesis. The Alpha channel is converted to a new image where RGB values equal the original Alpha, then both images are combined into a symmetric image to restore transparency information during playback.

Resource Preloading and Caching: For animations that need repeated playback, caching and preloading are important. The <video> tag's src can use URL.createObjectURL to play locally downloaded blob files. The solution uses indexDB to store downloaded blob files. The loading process checks local indexDB first—if the video resource exists, it reads directly; otherwise, it downloads and caches the resource for future use.

Performance Optimization: The initial afx SDK 1.0 used drawImage to get video frame information and CPU for mixing effects, causing high main thread usage with only ~10 FPS and 100% CPU. Later optimization used OpenGL to合成 final RGBA images, achieving 30-60 FPS.

Usage Process: Visual designers export AE files as image sequences, then use AFXCreator to synthesize the output file. Developers use the afx SDK to play the animation in their project.

Case Studies: The solution has been extensively used in large-scale promotional activities, including Spring Festival events, with 14+ implementations. Development cost for complex high-fidelity animations reduced from 2 days to 0.5 days—a 75% efficiency improvement. In Baidu's Spring Festival project "Collect Good Luck, Share 300 Million," 5 complex animations used the afx solution while others used CSS.

Conclusion: The afx transparent video visual enhancement solution effectively reproduces high-quality animations with small resource size and excellent performance. It is suitable for various visual enhancement scenarios, with future plans to combine CSS3, SVG, and other technologies for enhanced visual effects.