プレーヤーを iOS / Android / Web / Flutter / HarmonyOS に導入
以下のインストール手順とサンプルコードは各プロジェクトの公式 README から整理したものです。完全なパラメーター、最新バージョン、変更内容は各リポジトリを参照してください。
iOS
ネイティブの CoreAnimation で描画し、アプリバンドルまたはリモートサーバーから SVGA ファイルを読み込めます。
インストール
Podfile に依存関係を追加し、pod install を実行します。
target 'MyApp' do
pod 'SVGAPlayer', '~> 2.3'
end再生
SVGAPlayer と SVGAParser を作成し、解析完了後に videoItem を設定して再生を開始します。
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];補足
- リモートサーバーから読み込む場合は parseWithURL:completionBlock:failureBlock: を使用します。
- 画像の動的な差し替え、テキストの追加、要素の非表示、カスタム描画に対応しています。詳細はリポジトリの Wiki を参照してください。
Android
ネイティブの Android Canvas で描画し、assets またはリモートサーバーからアニメーションを読み込めます。
インストール
ルートの build.gradle に JitPack リポジトリを追加し、app/build.gradle に依存関係を追加します。
// root build.gradle
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
// app/build.gradle
implementation 'com.github.svga:SVGAPlayer-Android:2.6.1'再生
レイアウトに SVGAImageView を追加し、アニメーションリソースを指定して自動再生を有効にします。
<com.opensource.svgaplayer.SVGAImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:source="posche.svga"
app:autoPlay="true" />補足
- SVGAParser のシングルトンを使用する前に SVGAParser.shareParser().init(context) を呼び出す必要があります。
- 難読化する場合は com.squareup.wire.** と com.opensource.svgaplayer.proto.** を保持してください。
- README のサンプルにある compile は旧版 Gradle の記法です。新しいプロジェクトでは implementation を使用します。
Web
機能が充実した Web プレーヤーです。SVGA 1.x（JSZip が必要）、音声再生、IE 互換モードに対応しています。
インストール
npm でインストールするか、CDN のビルドを直接読み込みます。
npm install svgaplayerweb --save
<!-- または直接読み込み -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/svga.min.js"></script>再生
コンテナーを用意し、Player と Parser を作成してアニメーションを読み込んだ後に再生します。
<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>補足
- SVGA 1.x に対応するには JSZip を追加で読み込む必要があります。音声を再生するには howler.js を読み込みます。
- より小さなサイズが必要な場合は Web Lite を使用してください。
Web Lite
モバイル Web 向けの軽量プレーヤーです。サイズは 60 KB 未満（gzip で 18 KB 未満）で、WebWorker を使って解析します。
インストール
npm でインストールするか、unpkg の CDN ビルドを使用します。
npm i svga
<!-- または直接読み込み -->
<script src="https://unpkg.com/svga/dist/index.min.js"></script>再生
Parser を作成してアニメーションを読み込み、canvas にマウントして再生を開始します。
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()補足
- SVGA 1.x 形式と音声再生には対応していません。
- Android 4.4+ / iOS 9+ に対応しています。
Flutter
CustomPainter をベースにした Flutter 実装で、ローカルの assets またはリモートサーバーからアニメーションを読み込めます。
インストール
pubspec.yaml に依存関係を追加します。
dependencies:
svgaplayer_flutter: ^2.0.0再生
最も簡単な方法は SVGASimpleImage を使うことです。細かい制御が必要な場合は SVGAAnimationController を使用します。
SVGASimpleImage(
resUrl: 'https://github.com/svga/SVGA-Samples/blob/master/angel.svga?raw=true',
)補足
- SVGA 2.0 形式のみに対応しています。
- リソースのキャッシュは dio などのライブラリで別途処理し、キャッシュデータは SVGAParser のバイトデコードメソッドで処理する必要があります。
HarmonyOS
HarmonyOS NEXT 向けの SVGA プレーヤーで、宣言型 UI 1.0 / 2.0 コンポーネントを提供します。
インストール
OHPM でインストールします。
ohpm install @tb-open/svga再生
SVGA を初期化し、コントローラーを作成して SvgaPlayerV2 でアニメーションを描画します。
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)補足
- アプリリソース、リモート URL、サンドボックス内のファイルパスに対応しています。
- コントローラーで再生の制御、画像やテキストの差し替え、再生進捗とクリックイベントの監視ができます。