플레이어를 iOS / Android / Web / Flutter / HarmonyOS에 통합

target 'MyApp' do
  pod 'SVGAPlayer', '~> 2.3'
end

SVGAPlayer *player = [[SVGAPlayer alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
[self.view addSubview:player];

SVGAParser *parser = [[SVGAParser alloc] init];
[parser parseWithNamed:@"posche" inBundle:nil completionBlock:^(SVGAVideoEntity *videoItem) {
    if (videoItem != nil) {
        player.videoItem = videoItem;
        [player startAnimation];
    }
} failureBlock:nil];

// root build.gradle
allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

// app/build.gradle
implementation 'com.github.svga:SVGAPlayer-Android:2.6.1'

<com.opensource.svgaplayer.SVGAImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:source="posche.svga"
    app:autoPlay="true" />

npm install svgaplayerweb --save

<!-- 또는 직접 불러오기 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/svga.min.js"></script>

<div id="demoCanvas"></div>

<script>
  const player = new SVGA.Player('#demoCanvas');
  const parser = new SVGA.Parser('#demoCanvas');
  parser.load('rose.svga', (videoItem) => {
    player.setVideoItem(videoItem);
    player.startAnimation();
  });
</script>

npm i svga

<!-- 또는 직접 불러오기 -->
<script src="https://unpkg.com/svga/dist/index.min.js"></script>

import { Parser, Player } from 'svga'

const parser = new Parser()
const svga = await parser.load('xx.svga')

const player = new Player(document.getElementById('canvas'))
await player.mount(svga)
player.start()

dependencies:
  svgaplayer_flutter: ^2.0.0

SVGASimpleImage(
  resUrl: 'https://github.com/svga/SVGA-Samples/blob/master/angel.svga?raw=true',
)

ohpm install @tb-open/svga

import { Svga, SvgaController, SvgaPlayerV2 } from '@tb-open/svga'

// AbilityStage.onCreate
Svga.init(this.context)

private controller: SvgaController = new SvgaController({
  loops: 3,
  fillMode: 'forwards',
  autoRelease: true,
  clearsAfterStop: true
})

SvgaPlayerV2({
  url: $r('app.media.example_animation'),
  controller: this.controller
})
  .width(300)
  .height(150)