Flutter - 如何创建摇摆动画?

Flutter - How to create a wiggly animation?

我是 flutter 的新手,我正在尝试创建这样的东西:

它不必完全像这样,但类似的东西,更重要的是,易于实施,是我正在寻找的东西。

我什至不知道从哪里开始。

如果你只想显示不依赖于或不受任何 flutter 变量控制的动画,那么 lottie 是最简单的方法,它就像显示图像一样简单。

select 来自 lotties 的动画 free market, 然后从 pub.dev、link

导入包 lottie

然后在显示如下图像时使用,

// Load a Lottie file from your assets
Lottie.asset('assets/LottieLogo1.json'),

// Load a Lottie file from a remote url
Lottie.network('https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),

// Load an animation and its images from a zip file
Lottie.asset('assets/lottiefiles/angel.zip'),

这里是 something 我发现可能适合您的需要。

下面的动画,可以用https://lottiefiles.com来实现 正如@Ruchit 建议的那样。这是可用的最佳且更省时的选项。

我已经用你的配色方案更新了一些

从 pub.dev Lottie package 您可以实施到您的应用程序

注意:如果可用,您可以咨询您的设计师并获取 json 文件

使用 blobs

像这样创建一个动画 blob

Blob.animatedRandom(
 size:200,
 edgesCount:5,
 minGrowth:4,
 duration:  Duration(milliseconds:500),
 styles:  BlobStyles(
 color:  Colors.red,
 fillType:  BlobFillType.stroke,
 strokeWidth:3,
 ),
),

用动画容器包裹它并循环旋转它。根据需要调整值。您也可以在堆栈中使用它来实现问题中所示的结果。