让 Mac 直接预览svga
最近项目里增加了礼物特效,设计那边给了很多svga动画, 想要预览下动画效果,只能去一些网站打开,稍微有点麻烦. 搜索了一下还没有预览该动画的软件,反正svga团队提供了sdk就自己简单做个
svga团队只提供了 ios、android、flutter、web平台的sdk, 作为一个ios开发者当然首先选择ios sdk, 试了下 这个sdk 并不支持osx上使用.懒得深究了,一条路不通咱走另一条,刚好前段时间研究了下flutter, 就用flutter开发这个mac工具吧
接下来开始动手了
一、创建个flutter项目, 勾选下MacOS 平台支持
这就完成了项目创建
二、让(一) 项目支持 .svga 播放
打开 https://github.com/svga/SVGAPlayer-Flutter 按文档添加 依赖, 添加示例代码, run, 正常情况这时候应该可以在app上看到.svga动图
这个时候已经简单完成九成工作了,剩下的
三、让我们app成为.svga默认打开工具
1、 打开我们项目目录下 macos子项目
在 info.plist 中添加 Document Types, 让我们的app成为.sgva默认打开方式
完成后,双击 .svga 文件, 应该可以启动咱的app.
2、接下来需要把macOS采集的 数据 传给flutter, 使用FlutterEventChannel来进行双方通信
mac端代码
class MainFlutterWindow: NSWindow {
override func awakeFromNib() {
let flutterViewController = FlutterViewController.init()
let windowFrame = self.frame
self.contentViewController = flutterViewController
self.setFrame(windowFrame, display: true)
RegisterGeneratedPlugins(registry: flutterViewController)
if let messager = flutterViewController.engine.binaryMessenger as? FlutterBinaryMessenger {
let channel = FlutterEventChannel(name: "com.push.data", binaryMessenger: messager)
channel.setStreamHandler(self)
}
super.awakeFromNib()
}
var eventSink:FlutterEventSink? = nil
var dataBits: [UInt8]? = nil
func load(data: Data) {
dataBits = [UInt8](data)
self.eventSink?(self.dataBits!)
}
}
extension MainFlutterWindow: FlutterStreamHandler {
func onListen(withArguments arguments: Any?, eventSink events: @escaping FlutterEventSink) -> FlutterError? {
eventSink = events
events(self.dataBits) //openFiles在前, onListen在后, 在onListen 建立成功后将 data 传输给flutter
return nil
}
func onCancel(withArguments arguments: Any?) -> FlutterError? {
return nil
}
}
flutte端代码
import 'dart:async';
import 'package:file_selector/file_selector.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:svgaplayer_flutter/parser.dart';
import 'package:svgaplayer_flutter/player.dart';
import 'package:svgaplayer_flutter/proto/svga.pb.dart';
class SvgaWidgetextends StatefulWidget {
const SvgaWidget({super.key});
@override
StatecreateState() =>_SvgaWidgetState();
}
class _SvgaWidgetStateextends State
with SingleTickerProviderStateMixin {
static const EventChannel_eventChannel =EventChannel("com.push.data");
StreamSubscription?_streamSubscription;
late SVGAAnimationControlleranimationController;
MovieEntity?videoItem;
void _enableEventReceiver() {
_streamSubscription =_eventChannel.receiveBroadcastStream().listen(_listen,
onError: (dynamic error) {
print("-------error:${error.message}");
}, cancelOnError:true);
}
void _disableEventReceiver() {
if (_streamSubscription !=null) {
_streamSubscription?.cancel();
_streamSubscription =null;
}
}
@override
void initState() {
animationController =SVGAAnimationController(vsync:this);
super.initState();
_enableEventReceiver();
// loadAnimation();
}
@override
void dispose() {
super.dispose();
_disableEventReceiver();
}
/*
* 加载本地资源
* */
void loadAnimation(MovieEntity videoItem)async {
// final videoItem = await SVGAParser.shared.decodeFromURL(
// "https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true");
// final videoItem =
// await SVGAParser.shared.decodeFromAssets('images/loading.svga');
this.videoItem = videoItem;
animationController.videoItem = videoItem;
animationController
.repeat()// Try to use .forward() .reverse()
.whenComplete(() =>animationController.videoItem =null);
setState(() {
});
}
@override
Widgetbuild(BuildContext context) {
if (videoItem ==null) {
return _add();
}else {
return SVGAImage(animationController);
}
}
Widget_add() {
return Material(child:IconButton(onPressed:open,icon:const Icon(Icons.folder_open_sharp),),);
}
void _listen(event)async {
if (event ==null) {
return;
}
var data = event.cast();
var videoItem =await SVGAParser.shared.decodeFromBuffer(data);
loadAnimation(videoItem);
}
void open()async {
const XTypeGroup typeGroup =XTypeGroup(
label:'SVGA',
extensions: ['svga', 'SVGA'],
);
final XFile file =
(await openFile(acceptedTypeGroups: [typeGroup]))as XFile;
Uint8List data =await file.readAsBytes();
var videoItem =await SVGAParser.shared.decodeFromBuffer(data.cast());
loadAnimation(videoItem);
}
}
这样项目就算完整了
后面我又添加了其他花样的打开方式方便使用
flutter 端 file_selector、 macOS File -> Open
敬请参考:
