用java编写一个带交互的动画_Flutter(Flare) 最有趣用户交互动画没有之一

2019年12月12日，Flutter Interact ’19 上发布了怎么运用 Rive 和 Flutter 制造动态可交互的动画经验共享，我看了之后，觉得非常有趣，因而，写了3个小 demo，把它写成文章记录共享给咱们。

名词了解

首要，咱们来了解几个名词，否则后续文章，或许看着有些晕，如下：

Flare：是 Flutter 的动画插件称号，l – P S完好称号是 flare_flutter 咱们要在 pubspec.yaml 文件里引进

Rive：是制造 Flare 动画的网站，它既是一个网站也是制造工具，在此网站里有许多用户共享 Flare 动画供咱们下载运用、Flare API运用文档、制造 Flare 动画的视频教程(咱们也能够经过学习制造自己喜爱的动u ! Y g Q画) – f Y 3 K Y L)等

交互动画预览

登录交互动画

登v 4 [ 1 5 ! f d B录交互动画，包含如下6种动画：

idl. I 7 h * | = 9 xe：无任何操作时的状况(熊的身体会上下起浮和眨眼睛)

test：当咱们在 email 输入框中输入时的状况(熊会看o ( e Q P |向输入框– 3 &，且跟着你输入的长度旋转头部)

hands_up：当咱们在 password 输入框中~ – Y Y V ` J C输入时的状况 (熊会用手蒙上眼睛)

hands_down：当咱们在 password 输入框输入完成时的状况 (熊会放( c D下双手)

fail：当% f R咱? ! ! n H们登录失败时的状况(熊会做出伤心的表情)

succem N – a * { C T bss：当咱们登录r ^ [ # @成功时的状况(熊会做出快乐的表情)

以上6种状况，能够在 Rive 网站检查具体动画，点击进入检查I M I k h y J

下面，咱们来看看案例里完成动画效果

idle：无任何操作时的状况，如图：

idle

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

test

hands_up：当咱们在 password 输入框中输入T ~ : Z时的状况，hands_down&#x