Flutter Flar动画如何使用实战示例

Flare动画 在Flare动画出现之前,Flare动画大体可以分为使用AnimationController控制的基础动画以及使用Hero的转场动画,如果遇到

Flare动画

在Flare动画出现之前,Flare动画大体可以分为使用AnimationController控制的基础动画以及使用Hero的转场动画,如果遇到一些复杂的场景,使用这些动画方案实现起来还是有难度的。

不过,随着Flutter开始支持Flare矢量动面,Flutter的动画开发也变得越来越简单。事实上,Flare动画是一种类似于Lottie的矢量动画方案,使用Flare动面不仅可以有效减少安装包的体积,还能实现传统动画方案无法实现的复杂动画效果。

Flare矢量动画的网站

Rive是一个专业制作Flare矢量动画的网站,网站本身提供了很多免费Flare动画供开发者下载学习。除此之外,Rive还提供了Flare动画的使用和制作教程。为了便于学习和使用Rive网站的Flare动画,需要先注册一个Rive官方账号,如下图所示。

Rive以工程形式来创建和管理Flare动画项目,目前支持创建的Flare动画项目类型有两类,分别是Nima和Flare,区别如下:

• Nima:仅支持光栅图,主要用来为游戏引擎和应用构建2D动画。

• Flare:支持矢量图与光栅图,主要用来为移动App和Web构建实时、高效的动画,同时还支持构建游戏动画。

由于Nima主要用于构建2D游戏动画,所以对于Flutter应用开发来说,只需要新建一个Flare类型的项目即可。

创建Flare项目

目前,创建Flare项目主要有两种方式,一种是在Rive官网中进行创建,另一种则是通过Rive的客户端进行创建。此处以Rive客户端方式来说明如何创建Flare项目,如下图所示。

首先,打开Rive客户端,然后点击右上角的新建按钮创建一个 Flare空项目,然后就可以开始设计了,如下图所示。

不过,设计并制作Flare动画是一项专业性极强的工作,一般都由设计同学完成,开发同学只需要集成到项目中即可。如果需要为了制作Flare动画,官方也提供了详细的Flare动画制作教程。如果只是想体验一下Flare动画的魅力,那么可以使用Rive社区提供的免费Flare动画,如下图所示。

打开一个免费Flare动画项目,点击面板中【OPEN IN RIVE】选项打开Flare动画源文件,然后点击 【DownLoad】将项目下载到本地,如下图所示。

可以看到,下载到本地的Flare动画文件是.riv格式的文件,也是Flare动面需要加载的文件。需要注意的是,Flutter默认情况下是不识别Flare动画文件的,开发前需要我们先安装一下rive插件库,如下所示。

dependencies:
  …
  rive: ^0.11.8

接着,将之前下载到本地的Flare动画文件拷贝到assets资源文件中,然后在pubspec.yaml配置文件中注册动画文件。现在,我们就可以使用rive库提供的RiveAnimation组件来加载这个动画文件,如下所示。

RiveAnimation.asset('assets/rocket.riv')

其中,asset表示动画文件的路径,是一个必传参数。除了支持加载项目本地的文件外,RiveAnimation还支持网络图片。

同时,一个Flare动画文件是由多个动画节点构成的,通过这些动画节点,我们就可以很容易对动画进行精准的控制。我们可以打开Flare动画文件,然后在源文件面板的左下角来查看这些动画节点,如下图所示。

RiveAnimationController控制器

事实上,为了更好的在项目中使用Flare动画,并对动画进行精准控制,rive插件提供了一个RiveAnimationController控制器。借助它,开发者可以很容易的监听Flare动画的各种状态,以及对动画节点进行更精准的控制,如下所示。

class PlayPauseAnimationState extends State<PlayPauseAnimation> {
  late RiveAnimationController controller;
  void togglePlay() => setState(() => controller.isActive = !controller.isActive);
  bool get isPlaying => controller.isActive;
  @override
  void initState() {
    super.initState();
    controller = SimpleAnimation('idle');
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RiveAnimation.asset(
        'assets/off_road_car.riv',
        fit: BoxFit.cover,
        controllers: [controller],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: togglePlay,
        tooltip: isPlaying ? 'Pause' : 'Play',
        child: Icon(isPlaying ? Icons.pause : Icons.play_arrow),
      ),
    );
  }
}

在上面的代码中,我们使用RiveAnimation组件加载了一个本地Flare动画,然后再通过RiveAnimationController来控制动画的启动与运行。可以发现,相比传统的动画方案,Flare动画更加灵活,可以用它来实现一些复杂的动画效果。

以上就是Flutter Flar动画使用实战示例的详细内容,更多关于Flutter Flar动画效果的资料请关注好代码网其它相关文章!

您可能有感兴趣的文章
图文详解Flutter单例的如何实现

Flutter中如何使用setState时的6个简单技巧总结

Flutter路由fluro引入配置和如何使用的具体方法

Flutter如何实现下拉刷新和上拉加载更多

封装flutter状态管理工具示例详解