Flutter(Flare) 最有趣用户交互动画没有之一

2019年12月12日，Flutter 在 Flutter Interact '19 上发布了如何使用 Rive 和 Flutter 制做动态可交互的动画经验分享，我看了以后，以为很是有趣，所以，写了3个小 demo，把它写成文章记录分享给你们。

名词理解

首先，咱们来理解几个名词，否则后续文章，可能看着有些晕，以下：

• Flare：是 Flutter 的动画插件名称，完整名称是 flare_flutter 咱们要在 pubspec.yaml 文件里引入
• Rive：是制做 Flare 动画的网站，它既是一个网站也是制做工具，在此网站里有不少用户分享 Flare 动画供咱们下载使用、Flare API使用文档、制做 Flare 动画的视频教程（你们也能够经过学习制做本身喜欢的动画）等

交互动画预览

登陆交互动画

登陆交互动画，包含以下6种动画：

• idle：无任何操做时的状态（熊的身体会上下浮动和眨眼睛）
• test：当咱们在 email 输入框中输入时的状态（熊会看向输入框，且随着你输入的长度旋转头部）
• hands_up：当咱们在 password 输入框中输入时的状态 （熊会用手蒙上眼睛）
• hands_down：当咱们在 password 输入框输入完成时的状态 （熊会放下双手）
• fail：当咱们登陆失败时的状态（熊会作出难过的表情）
• success：当咱们登陆成功时的状态（熊会作出高兴的表情）

以上6种状态，能够在 Rive 网站查看具体动画，点击进入查看

下面，咱们来看看案例里实现动画效果

idle：无任何操做时的状态，如图：

idle

test：当咱们在 email 输入框中输入时的状态，如图：

test

hands_up：当咱们在 password 输入框中输入时的状态，hands_down：当咱们在 password 输入框输入完成时的状态，如图：

hands_up & hands_down

fail：当咱们登陆失败时的状态，如图：

fail

success：当咱们登陆成功时的状态，如图：

success

Button交互动画

button 交互动画，如图：

button

Menu交互动画

menu 交互动画，如图：

menu

以上全部动画，也能够 点击观看视频

代码实现

如何用代码实现，分为如下2个步骤：

• 引入插件和资源：引入相关插件 flare_flutter 、 smart_flare
• 编写代码：编写相关代码

引入插件和资源

引入插件和资源，以下：

dependencies:
  ...
  flare_flutter: ^2.0.4  # flare 插件
  smart_flare: any  # 对 flare API进行封装的插件，使用少许的代码便可实现交互动画
  ...

assets:
  ...
  - assets/Teddy.flr
  - assets/button-animation.flr
  - assets/slideout-menu.flr
  ...
复制代码

编写代码

因为，登陆交互动画稍复杂一些，在此就不展现实现的代码，如感兴趣，可移步GitHub查看源码

Button交互动画代码实现

button 交互动画代码实现以下：

import 'package:flutter/material.dart';
import 'package:smart_flare/actors/smart_flare_actor.dart';
import 'package:smart_flare/models.dart';

class FlareButtonDemo extends StatefulWidget {
  @override
  _FlareButtonDemoState createState() => _FlareButtonDemoState();
}

class _FlareButtonDemoState extends State<FlareButtonDemo> {
  @override
  Widget build(BuildContext context) {
    var animationWidth = 295.0;
    var animationHeight = 251.0;
    var animationWidthThirds = animationWidth / 3;
    var halfAnimationHeight = animationHeight / 2;

    var activeAreas = [

      ActiveArea(
        area: Rect.fromLTWH(0, 0, animationWidthThirds, halfAnimationHeight),
        debugArea: false,
        guardComingFrom: ['deactivate'],
        animationName: 'camera_tapped',
      ),

      ActiveArea(
          area: Rect.fromLTWH(animationWidthThirds, 0, animationWidthThirds, halfAnimationHeight),
          debugArea: false,
          guardComingFrom: ['deactivate'],
          animationName: 'pulse_tapped'),

      ActiveArea(
          area: Rect.fromLTWH(animationWidthThirds * 2, 0, animationWidthThirds, halfAnimationHeight),
          debugArea: false,
          guardComingFrom: ['deactivate'],
          animationName: 'image_tapped'),

      ActiveArea(
          area: Rect.fromLTWH(0, animationHeight / 2, animationWidth, animationHeight / 2),
          debugArea: false,
          animationsToCycle: ['activate', 'deactivate'],
          onAreaTapped: () {
            print('Button tapped!');
          })

    ];

    return Scaffold(
      appBar: AppBar(
        title: Text('Flare Button Demo'),
      ),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                Color(0x3fffeb3b),
                Colors.orange,
              ]),
        ),
        child: Align(
          alignment: Alignment.bottomCenter,
          child: SmartFlareActor(
            width: animationWidth,
            height: animationHeight,
            filename: 'assets/button-animation.flr',
            startingAnimation: 'deactivate',
            activeAreas: activeAreas,
          ),
        ),
      ),
    );
  }
}
复制代码

Menu交互动画代码实现

menu 交互动画代码实现，以下：

import 'package:flutter/material.dart';
import 'package:smart_flare/smart_flare.dart';

class FlareSidebarMenuDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print(MediaQuery.of(context).size.height);
    return Scaffold(
      body: Container(
        child: Align(
          alignment: Alignment.centerRight,
          child: PanFlareActor(
            width: MediaQuery.of(context).size.width / 2.366,
            height: MediaQuery.of(context).size.height,
            filename: 'assets/slideout-menu.flr',
            openAnimation: 'open',
            closeAnimation: 'close',
            direction: ActorAdvancingDirection.RightToLeft,
            threshold: 20.0,
            reverseOnRelease: true,
            completeOnThresholdReached: true,
            activeAreas: [
              RelativePanArea(
                  area: Rect.fromLTWH(0, .7, 1.0, .3), debugArea: false),
            ],
          ),
        ),
      ),
    );
  }
}
复制代码

以上3个交互动画案例的源码，放在了我2年前写的一个 Flutter案例 的项目里了，此项目现已维护起来，之后会长期更新，感兴趣的小伙伴能够收藏，没事时来看看可能会有新的发现 😲

此篇文章到此结束，下篇文章计划给你们分享，Flutter 里的路由，会总结概括全部的路由使用方法，最后来封装一个优秀的路由管理类。

最后附上博客和项目地址，以下：
博客地址：h.lishaoy.net/flutter-fla…
项目地址：github.com/persilee/fl…