Flutter Validate 屏幕中间的动画

Posted

技术标签:

【中文标题】Flutter Validate 屏幕中间的动画【英文标题】:Flutter Validate animation in the middle of the screen 【发布时间】:2021-07-07 12:10:20 【问题描述】:

我有一个应用,用户无法在帐户页面上更改他们的昵称。我希望,当他们这样做时,会出现一个验证图标,并带有动画,例如变大或自行打开,在一个圆圈中,并且在动画之后,它会消失,或者充其量,验证图标会慢慢绘制。喜欢:

喜欢验证昵称的变化。它会出现在屏幕中间。

类似的东西:

您对如何实现这一目标有任何想法吗?

【问题讨论】:

【参考方案1】:

您可以在 Flutter Flare 中创建此类动画。 查看https://pub.dev/packages/flare_flutter

在https://flare.rive.app/上创建动画并使用导出引擎导出,或者您可以在https://flare.rive.app/explore/popular/trending/all上找到现成的资源

从那里获得 .flr 文件后,您可以使用 flare_flutter 插件将其导入到您的颤振应用程序中。想要让动画消失,可以直接在flutter中隐藏widget。

import 'package:flare_flutter/flare_actor.dart';
class MyHomePage extends StatefulWidget 
  @override
  _MyHomePageState createState() => new _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  @override
  Widget build(BuildContext context) 
    return new FlareActor("assets/Filip.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"idle");
  

【讨论】:

谢谢!您能否编辑您的答案以举例说明我对这个软件包的要求? ?因为我不知道要显示它,带有基本动画的事件(因为我希望它在动画之后消失) 编辑了答案。

以上是关于Flutter Validate 屏幕中间的动画的主要内容,如果未能解决你的问题,请参考以下文章

译用Flutter实现一个炫酷的界面动画效果!

flutter 启动屏幕使用 Lottie 动画

如何为可扩展的 Flutter 小部件设置动画以将其滑出屏幕

在 Flutter 中创建一个动画屏幕

英雄动画在 Flutter 中不起作用

Flutter:在 ListView Builder 中使用 Hero 动画