AnimationPreviewer - 快速预览 Lottie & SVGA & GIF 的Mac小工具

2,494 阅读2分钟

现在开发App经常用到LottieSVGA的动画,有时候我想先看效果再写代码,但想看效果就得去官网上传文件才可以预览,感觉好麻烦(尤其是SVGA,不能在同一页面下查看不同动画,想看另一个动画要打开新的预览页面才行😠)。

于是乎就写了这个AnimationPreviewer,可以在桌面直接把文件拖拽到App中快速预览效果

Demo地址:AnimationPreviewer

AnimationPreviewer是用Mac Catalyst开发的(感兴趣的可以看我这篇文章:Mac Catalyst 初体验),目前功能比较简单,主要用来快速预览Lottie和SVGA

PS: 最新版本0.4.0除了支持预览GIF文件也支持纯JSON的Lottie动画了!

Feature:
    ✅ 可立即预览 Lottie & SVGA & GIF 的动画效果;
    ✅ 可截取动画任意一帧生成图片;
    ✅ 可将动画制作成视频并导出;
    ✅ 提供多种预览模式;
    ✅ 支持拖拽动画文件到App;
    ✅ 支持通过菜单栏打开动画文件;
    ✅ 支持自定义App背景。

快速预览动画效果

Lottie文件/SVGA文件/GIF文件/zip包丢进App即可:

example1.gif

  • 左边是动画播放展示区,右边是动画帧预览区。

可截取动画的任意一帧图片保存 & 可将动画制作成视频并导出

Lottie&SVGA&GIF都支持:

example2.gif

Tips

  1. 拖拽预览支持Lottie文件SVGA文件GIF文件及其对应的zip包

  2. 📢 注意【带图片】的Lottie文件的内容需要跟以下规格保持一致:

lottie_dir:
    - data.json
    - images:
        - img_0.png
          img_1.png
          img_2.png
          ...
  1. 除了拖拽,还能通过菜单栏打开动画文件:

example3.jpeg

  1. 可以自定义App背景图片:

example4.jpeg

  1. 可以自定义预览区域的背景色:

example5.gif


Demo地址:AnimationPreviewer

  • 使用Xcode运行项目需要先编译MacPlugin,然后才可以运行项目。
  • 项目编译之后可以把安装包丢到应用程序里面,以后直接在启动台中打开。
  • Release中提供dmg安装包。

另外Demo中的SVGA是使用我封装好的便捷播放器SVGAExPlayer,是对SVGAPlayer的二次封装,内置SVGA解析器、带有播放状态且可控制,同时可防止相同资源的重复加载,有需要的可以去看看😁。