FLUTTER Development - Animation - Nima

tags: Flutter nima

I. Overview

NIMA is a 2D vector animation tool for Skia-rendering
NIMA's use operation is basically the same as Flare
NIMA file decompression is included.nma.bytesFile and.pngImage file, specified when used.nma.bytesfile name

DiMA

2.1 Warehouse Address

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

2.2 plugin address

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

2.3 plug-in installation and uninstall

Plug-in installation

Open the CMD terminal, execute the following instructions (automatically add Pubspec.yaml dependence)

flutter pub add nima

Plugin uninstall

CDM terminal mode, executing the following instructions (Pubspec.yaml depends deleted)

flutter pub remove nima

Three NIMA materials (same as Flare)

3.1 Material Resources

https://flare.rive.app/

From the upper right corner, drop-down list Select a FLARE file

3.2 Material Download

In the NIMA animation details page, clickOPEN IN NIMA
After entering the details page, switch toANIMATE(animate)Tab, view action name, and corresponding animation (Wave, fly)
Click on the output button at the bottom to output this animation (after decompression is MyRobot.nma.bytes and MyRobot.png, put it in the assets directory)

Four examples

4.1 Add NIMA dependence (all files under Assets)

 assets:
     - images/
     - assets/

4.2 Example

// Select one from 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";});})
            ],)
          ],
        )

4.3 renderings

Intelligent Recommendation

FLUTTER Development - Animation - RIVE

I. Overview Rive is a FLARE upgrade version, is a real-time interaction design and animation tool. The reciprion of the file is.riv, Use it when loading animation isRive Flutter runtime Rive supports ...

Flutter Animation animation development-Curve animation curve

Introduction inFlutter Animation animation development-the simplest animation introductionIn this article we introduced the simplest animation development process Today we add an animation curve on th...

Flutter Animation animation development-the simplest animation introduction

In the following code, we have implemented an animation that changes the width and height of the green square from 100 to 500 within 5 seconds. to sum up: Create AnimationController and set the durati...

Flutter Development (15): Flutter animation basics

1. Which types of animation 2. Add animation 3. Add a monitor to animation 4.AnImatedWidget and AnimatedBuilder 5. Hero animation 1. Which types of animation About two categories: Tween -based and phy...

Flutter Animation animation development-reverse reverse playback

We know that AnimationController.forward () can play animation in forward direction, if you want to play animation in reverse, you can call AnimationController.reverse () Step on the pit Immediately w...