Flutter开发之——动画-Nima

最新推荐文章于 2024-04-17 08:58:11 发布

PGzxc

最新推荐文章于 2024-04-17 08:58:11 发布

阅读量453

点赞数

分类专栏： Flutter 文章标签： flutter nima

本文链接：https://blog.csdn.net/Calvin_zhou/article/details/116535918

版权

Flutter 专栏收录该内容

122 篇文章 44 订阅

订阅专栏

本文介绍了基于SKIA的2D矢量动画工具Nima，它与Flare操作相似。提供了Nima的仓库和插件链接，详细阐述了如何安装、卸载插件，以及如何下载和使用Nima素材。通过示例展示了在Flutter中集成Nima动画的步骤，包括添加依赖、选择动画并展示效果。

摘要由CSDN通过智能技术生成

一概述

Nima是基于SKIA进行渲染的2D矢量动画工具
Nima的使用操作与Flare基本相同
Nima的文件解压后包含.nma.bytes文件和.png图片文件，使用时指定.nma.bytes文件名

二 Nima

2.1 仓库地址

Nima-Flutter：https://github.com/2d-inc/Nima-Flutter

2.2 插件地址

nima 1.0.5：https://pub.dev/packages/nima

2.3 插件安装与卸载

插件安装

打开CMD终端，执行如下指令(自动添加pubspec.yaml依赖)

flutter pub add nima

插件卸载

CDM终端模式，执行如下指令(pubspec.yaml依赖被删除)

flutter pub remove nima

三 Nima素材(与Flare相同)

3.1 素材资源

https://flare.rive.app/

从右上角处，下拉列表选择Flare文件

3.2 素材下载

在Nima动画详情页，点击OPEN IN NIMA
进入到详情页后，切换到ANIMATE(animate)选项卡，查看动作名称，及相应的动画(wave,fly)
点击底部的输出按钮，将此动画输出(解压后是myrobot.nma.bytes和myrobot.png，同时放到assets目录下)

四示例

4.1 添加Nima依赖(assets下所有文件)

 assets:
     - images/
     - assets/

4.2 示例

//从wave,fly中选择一个
String _animationName = "wave";

body: Column(
        	children: [
            Flexible(child: NimaActor("assets/myrobot.nma.bytes", alignment:Alignment.center, fit:BoxFit.contain, animation: _animationName,)),
            Row(
              mainAxisAlignment:MainAxisAlignment.center,
              children: [
              RaisedButton(child: Text("wave"),onPressed: (){setState(() {_animationName="wave";});}),
              RaisedButton(child: Text("fly"),onPressed: (){setState(() {_animationName="fly";});})
            ],)
          ],
        )