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 کنفگ باکس لے کر چلتا ہے، بھرپور تحفہ ایفیکٹس کی pixel-perfect کمپوزٹنگ کے لیے۔

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 اینیمیشنز، جو cross-platform 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: After Effects اینیمیشنز جو JSON (یا ایک .lottie dotLottie بنڈل) کے طور پر ایکسپورٹ اور ہر پلیٹ فارم پر مقامی طور پر رینڈر ہوتی ہیں۔

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

متحرک 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);