UTD Market

Dijital Öğe Geliştirici Kılavuzu

UTD Market pazarındaki her format, resmi oynatma kütüphanesi ve Android, iOS, Web ve Flutter için yapıştırmaya hazır bir kod parçacığıyla.

Pazara göz at

Formatlar

Desteklenen formatlar ve oynatma kütüphaneleri

Her formatın altından platformunuzu seçin — kütüphane adları resmi depolara bağlanır.

SVGA

.svga

Doğrudan After Effects'ten dışa aktarılan, canlı yayın hediyelerinde yaygın kullanılan kompakt bir animasyon formatı. SVGAPlayer ailesi aracılığıyla donanım hızlandırmasıyla oynatılır.

AndroidSVGAPlayer-Android

GiftView.kt

val parser = SVGAParser(context)
parser.decodeFromURL(URL(itemUrl)) { videoItem ->
    svgaImageView.setVideoItem(videoItem)
    svgaImageView.startAnimation()
}

iOSSVGAPlayer-iOS

GiftView.swift

let player = SVGAPlayer(frame: view.bounds)
SVGAParser().parse(with: URL(string: itemUrl)!) { entity in
    player.videoItem = entity
    player.startAnimation()
}

Websvgaplayerweb

gift.js

import SVGA from "svgaplayerweb";

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

Fluttersvgaplayer_flutter

gift_view.dart

SVGASimpleImage(resUrl: itemUrl);

WebP

.webp

Tek bir küçük dosyada tam alfa şeffaflığına sahip animasyonlu WebP görselleri. Çoğu platformda yerel olarak desteklenir — çok az ek çalışma zamanı gerekir ya da hiç gerekmez.

AndroidGlide

GiftView.kt

// Animated WebP plays out of the box
Glide.with(context).load(itemUrl).into(imageView)

iOSSDWebImage + SDWebImageWebPCoder

GiftView.swift

SDImageCodersManager.shared.addCoder(SDImageWebPCoder.shared)
imageView.sd_setImage(with: URL(string: itemUrl))

WebNative <img>

gift.html

<!-- Animated WebP is supported natively -->
<img src="item.webp" alt="" />

FlutterImage (built-in)

gift_view.dart

// Animated WebP is supported natively
Image.network(itemUrl);

VAP

.mp4

Tencent'in Video Animation Player formatı: zengin hediye efektlerinin piksel mükemmelliğinde birleştirilmesi için bir renk kanalı ile bir alfa kanalı ve bir vapc yapılandırma kutusu taşıyan bir MP4.

AndroidTencent VAP

GiftView.kt

// AnimView from the VAP SDK
animView.setLoop(1)
animView.startPlay(File(itemPath))

iOSTencent VAP (QGVAPlayer)

GiftView.m

// QGVAPWrapView from the VAP SDK
[wrapView playHWDMP4:itemPath repeatCount:0 delegate:self];

Webvideo-animation-player

gift.js

import Vap from "video-animation-player";

new Vap({ container, src: itemUrl, config: vapcJson }).play();

Flutterflutter_vap

gift_view.dart

VapView();
await VapController.playPath(itemPath);

MP4 Alpha

.mp4

Karesi renk yarısını, gri tonlamalı bir alfa yarısının yanında tutan sıradan bir MP4. Oynatıcınız her iki yarıyı da örnekler ve tamamen şeffaf bir animasyon oluşturur.

Androidalpha-movie

GiftView.kt

// Side-by-side color/alpha video
alphaMovieView.setVideoFromUrl(itemUrl)
alphaMovieView.start()

iOSBDAlphaPlayer

GiftView.m

BDAlphaPlayerMetalConfiguration *config =
    [BDAlphaPlayerMetalConfiguration defaultConfiguration];
config.directory = itemDirectory;
[self.playerView playWithMetalConfiguration:config];

Web<video> + WebGL compositing

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);

Fluttervideo_player + FragmentShader

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'in PAG'ı (Portable Animated Graphics): After Effects animasyonları küçük bir ikili dosyada, platformlar arası libpag çalışma zamanıyla (web'de WASM) işlenir.

Androidlibpag

GiftView.kt

val pagView = PAGView(context)
pagView.composition = PAGFile.Load(itemPath)
pagView.setRepeatCount(0)
pagView.play()

iOSlibpag

GiftView.swift

let pagView = PAGView()
pagView.setComposition(PAGFile.load(itemPath))
pagView.setRepeatCount(0)
pagView.play()

Weblibpag (npm)

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'nin Lottie'si: After Effects animasyonları JSON olarak (veya bir .lottie dotLottie paketi olarak) dışa aktarılır ve her platformda yerel olarak işlenir.

Androidlottie-android

GiftView.kt

lottieView.setAnimationFromUrl(itemUrl)
lottieView.repeatCount = LottieDrawable.INFINITE
lottieView.playAnimation()

iOSlottie-ios

GiftView.swift

let view = LottieAnimationView(url: URL(string: itemUrl)!) { _ in }
view.loopMode = .loop
view.play()

Weblottie-web

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

Animasyonlu PNG — bir animasyon kontrol parçasına sahip standart PNG formatı; kayıpsız kaliteyi ve tam alfayı korur. Statik PNG dosyaları pazar tarafından reddedilir.

AndroidAPNG4Android

GiftView.kt

val drawable = APNGDrawable.fromFile(itemPath)
imageView.setImageDrawable(drawable)

iOSSDWebImage

GiftView.swift

// APNG plays out of the box
imageView.sd_setImage(with: URL(string: itemUrl))

WebNative <img>

gift.html

<!-- APNG is supported natively -->
<img src="item.png" alt="" />

FlutterImage (built-in)

gift_view.dart

// APNG is supported natively
Image.network(itemUrl);