格式
支持的格式与播放库
在每种格式下选择你的平台——库名称链接至官方仓库。
SVGA
.svga一种直接从 After Effects 导出的紧凑动画格式，广泛用于直播礼物。通过 SVGAPlayer 系列以硬件加速播放。
val parser = SVGAParser(context)
parser.decodeFromURL(URL(itemUrl)) { videoItem ->
svgaImageView.setVideoItem(videoItem)
svgaImageView.startAnimation()
}
let player = SVGAPlayer(frame: view.bounds)
SVGAParser().parse(with: URL(string: itemUrl)!) { entity in
player.videoItem = entity
player.startAnimation()
}
import SVGA from "svgaplayerweb";
const player = new SVGA.Player("#canvas");
new SVGA.Parser().load(itemUrl, (videoItem) => {
player.setVideoItem(videoItem);
player.startAnimation();
});
SVGASimpleImage(resUrl: itemUrl);
WebP
.webp在单个小文件中支持完整 alpha 透明度的动画 WebP 图像。多数平台原生支持——几乎无需额外运行时。
// Animated WebP plays out of the box
Glide.with(context).load(itemUrl).into(imageView)
SDImageCodersManager.shared.addCoder(SDImageWebPCoder.shared)
imageView.sd_setImage(with: URL(string: itemUrl))
<!-- Animated WebP is supported natively -->
<img src="item.webp" alt="" />
// Animated WebP is supported natively
Image.network(itemUrl);
VAP
.mp4腾讯的 Video Animation Player 格式：一个 MP4 携带颜色轨道加 alpha 轨道以及 vapc 配置框，用于像素级精确合成丰富的礼物特效。
// AnimView from the VAP SDK
animView.setLoop(1)
animView.startPlay(File(itemPath))
// QGVAPWrapView from the VAP SDK
[wrapView playHWDMP4:itemPath repeatCount:0 delegate:self];
import Vap from "video-animation-player";
new Vap({ container, src: itemUrl, config: vapcJson }).play();
VapView();
await VapController.playPath(itemPath);
MP4 Alpha
.mp4一个普通的 MP4，其画面一半是彩色、另一半是灰度 alpha。你的播放器采样两半并合成出完全透明的动画。
// Side-by-side color/alpha video
alphaMovieView.setVideoFromUrl(itemUrl)
alphaMovieView.start()
BDAlphaPlayerMetalConfiguration *config =
[BDAlphaPlayerMetalConfiguration defaultConfiguration];
config.directory = itemDirectory;
[self.playerView playWithMetalConfiguration:config];
// Upload each <video> frame as a texture, then in the
// fragment shader: rgb from the color half x alpha from
// the alpha half -> draw on a transparent canvas.
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
gl.UNSIGNED_BYTE, video);
// Play the mp4, sample color/alpha halves in a
// custom FragmentShader and paint the composited frame.
final controller = VideoPlayerController.networkUrl(Uri.parse(itemUrl));
await controller.initialize();
controller.play();
PAG
.pag腾讯的 PAG（Portable Animated Graphics）：以极小二进制文件承载的 After Effects 动画，由跨平台 libpag 运行时渲染（Web 端为 WASM）。
val pagView = PAGView(context)
pagView.composition = PAGFile.Load(itemPath)
pagView.setRepeatCount(0)
pagView.play()
let pagView = PAGView()
pagView.setComposition(PAGFile.load(itemPath))
pagView.setRepeatCount(0)
pagView.play()
import { PAGInit } from "libpag";
const PAG = await PAGInit();
const file = await PAG.PAGFile.load(buffer);
const view = await PAG.PAGView.init(file, canvas);
view.setRepeatCount(0);
await view.play();
PAGView.network(
itemUrl,
repeatCount: PAGView.REPEAT_COUNT_LOOP,
autoPlay: true,
);
Lottie
.json / .lottieAirbnb 的 Lottie：将 After Effects 动画导出为 JSON（或 .lottie dotLottie 包），在每个平台上原生渲染。
lottieView.setAnimationFromUrl(itemUrl)
lottieView.repeatCount = LottieDrawable.INFINITE
lottieView.playAnimation()
let view = LottieAnimationView(url: URL(string: itemUrl)!) { _ in }
view.loopMode = .loop
view.play()
import lottie from "lottie-web";
lottie.loadAnimation({
container,
path: itemUrl,
renderer: "svg",
loop: true,
autoplay: true,
});
APNG
.png动画 PNG——在标准 PNG 格式上加入动画控制块，保持无损画质和完整 alpha。市场会拒绝静态 PNG 文件。
val drawable = APNGDrawable.fromFile(itemPath)
imageView.setImageDrawable(drawable)
// APNG plays out of the box
imageView.sd_setImage(with: URL(string: itemUrl))
<!-- APNG is supported natively -->
<img src="item.png" alt="" />
// APNG is supported natively
Image.network(itemUrl);