Backdrop
Transparent video animation is currently one of the more popular implementations of animation. Major manufacturers have also open sourced their own frameworks. In the end, we chose Tencent vap, which supports Android, IOS, and Web, and provides natural convenience for us to encapsulate flutter_vap. Provides a tool to generate a video with an alpha channel from a frame picture, which is simply awesome.
VAP（Video Animation Player）is developed by Penguin E-sports and is used to play cool animations.
- Compared with Webp and Apng animation solutions, it has the advantages of high compression rate (smaller material) and hardware decoding (faster decoding)
- Compared with Lottie, it can achieve more complex animation effects (such as particle effects)
Preview
Setup
flutter_vap: ${last_version}
How to use
import 'package:flutter_vap/flutter_vap.dart';
IgnorePointer(
// VapView can set the width and height through the outer package Container() to limit the width and height of the pop-up video
child: VapView(),
),
- Play local video
> _playFile(String path) async { if (path == null) { return null; } var res = await VapController.playPath(path); if (res["status"] == "failure") { showToast(res["errorMsg"]); } return res; } ">
import 'package:flutter_vap/flutter_vap.dart'; /// return: play error: {"status": "failure", "errorMsg": ""} /// play complete: {"status": "complete"} Future<Map<dynamic, dynamic>> _playFile(String path) async { if (path == null) { return null; } var res = await VapController.playPath(path); if (res["status"] == "failure") { showToast(res["errorMsg"]); } return res; }
- Play asset video
Future<Map<dynamic, dynamic>> _playAsset(String asset) async {
if (asset == null) {
return null;
}
var res = await VapController.playAsset(asset);
if (res["status"] == "failure") {
showToast(res["errorMsg"]);
}
return res;
}
- Stop play
VapController.stop()
- Queue play
VapController.playPath(downloadPathList[0])); QueueUtil.get("vapQueue").addTask(() => VapController.playPath(downloadPathList[1])); } ">
_queuePlay() async {。 // Simultaneously call playback in multiple places, making the queue perform playback. QueueUtil.get("vapQueue").addTask(() => VapController.playPath(downloadPathList[0])); QueueUtil.get("vapQueue").addTask(() => VapController.playPath(downloadPathList[1])); }
- Cancel queue playback
QueueUtil.get("vapQueue").cancelTask();
Example
651 Dec 24, 2022
1 Oct 23, 2021
32 Dec 14, 2022
109 Dec 16, 2022
6 Jan 4, 2023
489 Dec 18, 2022
4 Dec 8, 2022
1.6k Jan 7, 2023
349 Jan 3, 2023
116 Dec 14, 2022