This issue recommends a ByteDance open source video animation SDK – AlphaPlayer.
AlphaPlayer is a video animation SDK used by the live broadcast station. It can create video materials separated by Alpha channel, and then re-realize the mixing of Alpha channel and RGB channel through ES on the client. The real implementation is to play video with transparent channels in OpenGL.
The maintenance scheme of this system significantly reduces the production cost of the client, because its performance and start-up cost are more reliable than cocos2d engine, and load for load and cost, providing a new way for complex animation, new complex animation development is very simple and efficient.
Comparison scheme
What are the common animation schemes at present? Simple animation schemes include apricot animation, frame animation, gif/web, lottie/ engine. A simple comparison is made between the implementation of SVGA animation effect and cocos:
AlphaPlayer’s access size is very small (only about 40KB), and the height of animation resources, resources production does not need to consider the problem of special effects, very friendly to developers and designers.
Running effect:
Basic principles
There are two main cores. IMediaPlayer is responsible for the video output interface and supports external renderers. The other is VideoPlayer, which is responsible for parsing each frame for blending, or GLTextViewGLSur.
The approximate mixing process can be seen in the following example:
The RGB channel transmitted in the screen of the original image stores the original transparent Alpha part, and the right part uses the RGB channel value to store the original transparent RGB value. On the terminal, the Alpha and RGB of each pixel are displayed again through OpenGL video for numerical combination, and the ARGB video screen is re-generated to achieve the animation effect of transparent video.
Fast access
- iOS
Add
pod 'BDAlphaPlayer'Initialization View
BDAlphaPlayerMetalView *metalView = [[BDAlphaPlayerMetalView alloc] initWithDelegate:self];
[self.view addSubview:metalView]; Animation play video
BDAlphaPlayerMetalConfiguration *configuration = [BDAlphaPlayerMetalConfiguration defaultConfiguration];
NSString *testResourcePath = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"TestResource"];
NSString *directory = [testResourcePath stringByAppendingPathComponent:@"heartbeats"];
configuration.directory = directory;
configuration.renderSuperViewFrame = self.view.frame;
configuration.orientation = BDAlphaPlayerOrientationPortrait;
[self.metalView playWithMetalConfiguration:configuration]; - Android
Add
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
dependencies {
< span class = "HLJS - attr" > implementation < / span > < span class = "HLJS - string" > 'com. Making. Bytedance: AlphaPlayer: 1.0.4' < / span >
}Initialize PlayerController
val config = Configuration(context, lifecycleOwner)
// Support GLSurfaceView& GLTextureView, default GLSurfaceView
config.alphaVideoViewType = AlphaVideoViewType.GL_TEXTURE_VIEW
// You can also set up your own implementation of the Player, the demo provides an implementation based on ExoPlayer
val playerController = PlayerController.get(config, DefaultSystemPlayer())
playerController.setPlayerAction(object: IPlayerAction {
override fun onVideoSizeChanged(videoWidth: Int, videoHeight: Int, scaleType: ScaleType) {
}
override fun startAction() {
}
override fun endAction() {
}
})
playController.setMonitor(object: IMonitor {
override fun monitor(result: Boolean, playType: String, what: Int, extra: Int, errorInfo: String) {
}
})Bind PlayerController to ViewGroup
playerController.attachAlphaView(mVideoContainer)Animation play video
fun startVideoAnimation() {
val baseDir = "your video file base dir"
val portraitFileName = "portrait.mp4"
val portraitScaleType = 2
val landscapeFileName = "landscape.mp4"
val landscapeScaleType = 2
val dataSource = DataSource().setBaseDir(baseDir)
.setPortraitPath(portraitFileName, portraitScaleType)
.setLandscapePath(landscapeFileName, landscapeScaleType)
.setLooping(false) // Sets whether the video is looped
if (dataSource.isValid()) {
playerController.start(dataSource)
}
}Resource release
fun releasePlayerController() {
playerController.detachAlphaView(mVideoContainer)
playerController.release()
}—END—
Open Source protocol: Apache2.0
