前不久，字節跳動的技術團隊在Github上開源了一個視頻動畫特效SDK，可以通過制作Alpha通道分離的視頻素材，再在客戶端上通過OpenGL ES重新實現Alpha通道和RGB通道的混合，從而實現在端上播放帶透明通道的視頻。
這套方案對設計師而言明顯降低了特效的制作成本，對於客戶端而言有着更可靠的性能和穩定性，且相比cocos2d引擎有着更低的入門門檻和維護成本，為復雜動畫的實現提供了一種全新的方式，新的復雜動畫開發將會變得更加簡單高效。
AlphaPlayer已經在Github上標星331，累計分支 28 個(Github開源地址：https://github.com/bytedance/AlphaPlayer)
目前，抖音、抖音火山版、西瓜小視頻、今日頭條已經接入。
這套方案對設計師而言明顯降低了特效的制作成本，對於客戶端而言有着更可靠的性能和穩定性，且相比cocos2d引擎有着更低的入門門檻和維護成本，為復雜動畫的實現提供了一種全新的方式，新的復雜動畫開發將會變得更加簡單高效。
背景
在直播項目的原有禮物動畫實現效果是通過cocos引擎實現的，大部分動畫都是通過一系列的旋轉平移縮放組合而成，能實現的動畫效果較簡單且開發成本較高。為了豐富動畫的表現形式，降低開發成本，我們引入了AlphaPlayer的動畫實現方案。
方案對比
目前較常見的動畫實現方案有原生動畫、幀動畫、gif/webp、lottie/SVGA、cocos引擎，對於復雜動畫特效的實現做個簡單對比
方案實現成本上手成本還原程度接入成本原生動畫復雜動畫實現成本高低中低幀動畫實現成本低，但資源消耗大低中低gif/webp實現成本低，但資源消耗大低只支持8位顏色低Lottie/SVGA實現成本低，部分復雜特效不支持低部分復雜特效不支持低cocos2d引擎實現成本高高較高較高AlphaPlayer開發無任何實現成本，一次接入永久使用低高低
運行效果：
快速接入
allprojects { repositories { ... maven { url 'https://jitpack.io' } }}dependencies { implementation 'com.github.bytedance:AlphaPlayer:1.0.3'}
添加依賴
val config = Configuration(context, lifecycleOwner)// 支持GLSurfaceView&GLTextureView, 默認使用GLSurfaceViewconfig.alphaVideoViewType = AlphaVideoViewType.GL_TEXTURE_VIEW// 也可以設置自行實現的Player, demo中提供了基於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) { }})
初始化PlayerController
playerController.attachAlphaView(mVideoContainer)
將PlayerController綁定到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) }}
播放動畫視頻
fun releasePlayerController() { playerController.detachAlphaView(mVideoContainer) playerController.release()}
高級特性
動畫對齊方式
為了解決不同屏幕尺寸的兼容問題和支持半屏動畫視頻的指定位置播放，我們提供了多種視頻裁剪對齊方式，詳細可見ScaleType.kt。
對齊模式描述ScaleToFill拉伸鋪滿全屏ScaleAspectFitCenter等比例縮放對齊全屏，居中，屏幕多余部分留空ScaleAspectFill等比例縮放鋪滿全屏，居中，裁剪視頻多余部分TopFill等比例縮放鋪滿全屏，頂部對齊BottomFill等比例縮放鋪滿全屏，底部對齊LeftFill等比例縮放鋪滿全屏，左邊對齊RightFill等比例縮放鋪滿全屏，右邊對齊TopFit等比例縮放至屏幕寬度，頂部對齊，底部留空BottomFit等比例縮放至屏幕寬度，底部對齊，頂部留空LeftFit等比例縮放至屏幕高度，左邊對齊，右邊留空RightFit等比例縮放至屏幕高度，右邊對齊，左邊留空
Alpha通道壓縮方案
為了進一步減少視頻動畫文件的體積，我們做了很多方向的嘗試，包括透明畫面像素點冗余channel的復用和整體尺寸壓縮，可以期待后續更新。
項目結構&基本原理
AlphaPlayer主要有兩個核心部分，一個是MediaPlayer，負責視頻每一幀的解碼，支持接入方自行實現；另一個是VideoRenderer，負責將解析出來的每一幀畫面進行alpha通道混合，再輸出到Surface上。View使用的是GLSurfaceView，性能相對TextureView更優，但層級限制在最頂層。AlphaPlayer內部是通過Render渲染紋理畫面的，設計師導出的視頻資源會包含兩部分內容——透明遮罩畫面和原視頻畫面兩部分，然后通過shader進行alpha值的混合，詳細可以看 frag.sh和vertex.sh。
————————————————
版權聲明：本文為CSDN博主「王慧02012」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_34508682/article/details/112163689