Not long ago, the technical team of byte beating opened a video animation special effects SDK on Github, which can realize the mixing of Alpha channel and RGB channel on the client through OpenGL ES by making video materials separated from Alpha channel, so as to play video with transparent channel on the client.

This scheme significantly reduces the production cost of special effects for designers, has more reliable performance and stability for clients, and has lower entry threshold and maintenance cost compared with cocos2d engine. It provides a new way for the realization of complex animation, and the development of new complex animation will become more simple and efficient.

Alphaplayer has marked 331 stars on Github, with a total of 28 branches (Github open source address: https://github.com/bytedance/AlphaPlayer )

At present, Tiktok, Tiktok volcano version, watermelon small video and today's headlines have been accessed. This scheme significantly reduces the production cost of special effects for designers, has more reliable performance and stability for clients, and has lower entry threshold and maintenance cost compared with cocos2d engine. It provides a new way for the realization of complex animation, and the development of new complex animation will become more simple and efficient.

background

In the live broadcast project, the original gift animation effect is realized through the cocos engine. Most of the animation is combined through a series of rotation, translation and zoom. The animation effect is simple and the development cost is high. In order to enrich the expression forms of animation and reduce the development cost, we introduce the animation implementation scheme of AlphaPlayer.

Scheme comparison

At present, the more common animation implementation schemes include native animation, frame animation, gif/webp, lottie/SVGA and cocos engine. Make a simple comparison for the implementation of complex animation effects

Operation effect:

Fast access

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

dependencies {
    implementation 'com.github.bytedance:AlphaPlayer:1.0.3'
}

Add dependency

val config = Configuration(context, lifecycleOwner)
// GLSurfaceView & gltextureview are supported. GLSurfaceView is used by default
config.alphaVideoViewType = AlphaVideoViewType.GL_TEXTURE_VIEW
// You can also set your own player. An implementation based on ExoPlayer is provided in the demo
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) {
  }
}) 

Initialize PlayerController

playerController.attachAlphaView(mVideoContainer)

Bind PlayerController to ViewGroup

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)
  if (dataSource.isValid()) {
    playerController.start(dataSource)
  }
}

Play animated video

fun releasePlayerController() {
  playerController.detachAlphaView(mVideoContainer)
  playerController.release()
}

Advanced features

Animation alignment

In order to solve the compatibility problem of different screen sizes and support the specified position playback of half screen animation video, we provide a variety of video clipping and alignment methods. See scaletype for details kt.

Alpha channel compression scheme

In order to further reduce the volume of video animation files, we have made many attempts, including multiplexing of redundant channel s of transparent picture pixels and overall size compression. We can expect subsequent updates.

Project structure & rationale

AlphaPlayer mainly has two core parts. One is MediaPlayer, which is responsible for decoding each frame of video and supports the access party to realize it by itself; The other is VideoRenderer, which is responsible for alpha channel mixing of each frame analyzed, and then output it to the Surface. View uses GLSurfaceView, which has better performance than TextureView, but the level is limited to the top. AlphaPlayer internally renders texture pictures through Render. The video resources exported by the designer will contain two parts - transparent mask picture and original video picture, and then mix the alpha values through the shader. See frag for details SH and vertex sh.

contact us

If you have any questions or suggestions about AlphaPlayer, you can send an email to: dengzhuoyao@bytedance.com , describe your problem in detail in the email.

License

Apache 2.0