UTD Market

डिजिटल आइटम डेवलपर गाइड

UTD Market मार्केटप्लेस पर हर फॉर्मेट, आधिकारिक प्लेबैक लाइब्रेरी और Android, iOS, Web और Flutter के लिए एक रेडी-टू-पेस्ट स्निपेट के साथ।

फॉर्मेट

समर्थित फॉर्मेट और प्लेबैक लाइब्रेरी

प्रत्येक फॉर्मेट के तहत अपना प्लेटफॉर्म चुनें — लाइब्रेरी नाम आधिकारिक रिपॉजिटरी से लिंक होते हैं।

SVGA

.svga

After Effects से सीधे एक्सपोर्ट किया गया एक कॉम्पैक्ट एनिमेशन फॉर्मेट, जो लाइव-स्ट्रीमिंग गिफ्ट के लिए व्यापक रूप से उपयोग किया जाता है। SVGAPlayer फैमिली के जरिए हार्डवेयर एक्सेलेरेशन के साथ चलता है।

GiftView.kt
val parser = SVGAParser(context)
parser.decodeFromURL(URL(itemUrl)) { videoItem ->
    svgaImageView.setVideoItem(videoItem)
    svgaImageView.startAnimation()
}
GiftView.swift
let player = SVGAPlayer(frame: view.bounds)
SVGAParser().parse(with: URL(string: itemUrl)!) { entity in
    player.videoItem = entity
    player.startAnimation()
}
gift.js
import SVGA from "svgaplayerweb";

const player = new SVGA.Player("#canvas");
new SVGA.Parser().load(itemUrl, (videoItem) => {
  player.setVideoItem(videoItem);
  player.startAnimation();
});
gift_view.dart
SVGASimpleImage(resUrl: itemUrl);

WebP

.webp

एक ही छोटी फ़ाइल में पूर्ण अल्फा पारदर्शिता के साथ एनिमेटेड WebP इमेज। अधिकांश प्लेटफॉर्म पर मूल रूप से समर्थित — बहुत कम या बिना किसी अतिरिक्त रनटाइम की आवश्यकता।

AndroidGlide
GiftView.kt
// Animated WebP plays out of the box
Glide.with(context).load(itemUrl).into(imageView)
GiftView.swift
SDImageCodersManager.shared.addCoder(SDImageWebPCoder.shared)
imageView.sd_setImage(with: URL(string: itemUrl))
gift.html
<!-- Animated WebP is supported natively -->
<img src="item.webp" alt="" />
gift_view.dart
// Animated WebP is supported natively
Image.network(itemUrl);

VAP

.mp4

Tencent का Video Animation Player फॉर्मेट: एक MP4 जो एक कलर ट्रैक साथ में एक अल्फा ट्रैक और एक vapc कॉन्फ़िग बॉक्स रखता है, रिच गिफ्ट इफेक्ट के पिक्सेल-परफेक्ट कंपोज़िटिंग के लिए।

GiftView.kt
// AnimView from the VAP SDK
animView.setLoop(1)
animView.startPlay(File(itemPath))
GiftView.m
// QGVAPWrapView from the VAP SDK
[wrapView playHWDMP4:itemPath repeatCount:0 delegate:self];
gift.js
import Vap from "video-animation-player";

new Vap({ container, src: itemUrl, config: vapcJson }).play();
gift_view.dart
VapView();
await VapController.playPath(itemPath);

MP4 Alpha

.mp4

एक सामान्य MP4 जिसका फ्रेम एक ग्रेस्केल अल्फा हाफ के बगल में कलर हाफ रखता है। आपका प्लेयर दोनों हिस्सों का सैंपल लेता है और एक पूरी तरह पारदर्शी एनिमेशन कंपोज़िट करता है।

GiftView.kt
// Side-by-side color/alpha video
alphaMovieView.setVideoFromUrl(itemUrl)
alphaMovieView.start()
GiftView.m
BDAlphaPlayerMetalConfiguration *config =
    [BDAlphaPlayerMetalConfiguration defaultConfiguration];
config.directory = itemDirectory;
[self.playerView playWithMetalConfiguration:config];
gift.js
// 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);
gift_view.dart
// 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

Tencent का PAG (Portable Animated Graphics): एक छोटी बाइनरी फ़ाइल में After Effects एनिमेशन, क्रॉस-प्लेटफॉर्म libpag रनटाइम (वेब पर WASM) द्वारा रेंडर किए जाते हैं।

Androidlibpag
GiftView.kt
val pagView = PAGView(context)
pagView.composition = PAGFile.Load(itemPath)
pagView.setRepeatCount(0)
pagView.play()
GiftView.swift
let pagView = PAGView()
pagView.setComposition(PAGFile.load(itemPath))
pagView.setRepeatCount(0)
pagView.play()
gift.js
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();
Flutterpag
gift_view.dart
PAGView.network(
  itemUrl,
  repeatCount: PAGView.REPEAT_COUNT_LOOP,
  autoPlay: true,
);

Lottie

.json / .lottie

Airbnb का Lottie: JSON (या एक .lottie dotLottie बंडल) के रूप में एक्सपोर्ट किए गए After Effects एनिमेशन और हर प्लेटफॉर्म पर मूल रूप से रेंडर किए जाते हैं।

GiftView.kt
lottieView.setAnimationFromUrl(itemUrl)
lottieView.repeatCount = LottieDrawable.INFINITE
lottieView.playAnimation()
GiftView.swift
let view = LottieAnimationView(url: URL(string: itemUrl)!) { _ in }
view.loopMode = .loop
view.play()
gift.js
import lottie from "lottie-web";

lottie.loadAnimation({
  container,
  path: itemUrl,
  renderer: "svg",
  loop: true,
  autoplay: true,
});
Flutterlottie
gift_view.dart
Lottie.network(itemUrl);

APNG

.png

Animated PNG — एक एनिमेशन कंट्रोल चंक के साथ मानक PNG फॉर्मेट, जो लॉसलेस गुणवत्ता और पूर्ण अल्फा बनाए रखता है। स्टैटिक PNG फ़ाइलें मार्केटप्लेस द्वारा अस्वीकार कर दी जाती हैं।

GiftView.kt
val drawable = APNGDrawable.fromFile(itemPath)
imageView.setImageDrawable(drawable)
GiftView.swift
// APNG plays out of the box
imageView.sd_setImage(with: URL(string: itemUrl))
gift.html
<!-- APNG is supported natively -->
<img src="item.png" alt="" />
gift_view.dart
// APNG is supported natively
Image.network(itemUrl);