Another Android open source masterpiece released! New video animation special effects SDK: efficient, stable and reliable, low maintenance cost

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

programme Realization cost Starting cost Reduction degree Access cost
Native animation High cost of complex animation low in low
Frame animation The implementation cost is low, but the resource consumption is large low in low
gif/webp The implementation cost is low, but the resource consumption is large low Only 8-bit colors are supported low
Lottie/SVGA The implementation cost is low, and some complex special effects are not supported low Some complex effects are not supported low
Cos2d engine High implementation cost high higher higher
AlphaPlayer There is no implementation cost for development, and one-time access can be used permanently low high low

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.

Align mode describe
ScaleToFill Stretch full screen
ScaleAspectFitCenter Align the full screen with equal scale, center it, and leave the excess part of the screen blank
ScaleAspectFill Equal scale, spread the full screen, center, and cut the excess part of the video
TopFill Equal scale, full screen, top aligned
BottomFill Equal scale, full screen, bottom aligned
LeftFill Equal scale, full screen, left aligned
RightFill Equal scale, full screen, right aligned
TopFit Scale equally to the screen width, align the top and leave the bottom blank
BottomFit Scale equally to the screen width, align the bottom, and leave the top blank
LeftFit Zoom to the screen height in equal proportion, align on the left and leave blank on the right
RightFit Zoom to the screen height in equal proportion, align on the right and leave blank on the left

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

Tags: Android SDK

Posted by Pryach on Mon, 16 May 2022 21:31:56 +0300