फॉर्मेट
समर्थित फॉर्मेट और प्लेबैक लाइब्रेरी
प्रत्येक फॉर्मेट के तहत अपना प्लेटफॉर्म चुनें — लाइब्रेरी नाम आधिकारिक रिपॉजिटरी से लिंक होते हैं।
SVGA
.svgaAfter 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एक ही छोटी फ़ाइल में पूर्ण अल्फा पारदर्शिता के साथ एनिमेटेड 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
.mp4Tencent का Video Animation Player फॉर्मेट: एक MP4 जो एक कलर ट्रैक साथ में एक अल्फा ट्रैक और एक 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 जिसका फ्रेम एक ग्रेस्केल अल्फा हाफ के बगल में कलर हाफ रखता है। आपका प्लेयर दोनों हिस्सों का सैंपल लेता है और एक पूरी तरह पारदर्शी एनिमेशन कंपोज़िट करता है।
// 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
.pagTencent का PAG (Portable Animated Graphics): एक छोटी बाइनरी फ़ाइल में After Effects एनिमेशन, क्रॉस-प्लेटफॉर्म libpag रनटाइम (वेब पर 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: JSON (या एक .lottie dotLottie बंडल) के रूप में एक्सपोर्ट किए गए After Effects एनिमेशन और हर प्लेटफॉर्म पर मूल रूप से रेंडर किए जाते हैं।
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
.pngAnimated PNG — एक एनिमेशन कंट्रोल चंक के साथ मानक PNG फॉर्मेट, जो लॉसलेस गुणवत्ता और पूर्ण अल्फा बनाए रखता है। स्टैटिक 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);