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,
),
),
用动画容器包裹它并循环旋转它。根据需要调整值。您也可以在堆栈中使用它来实现问题中所示的结果。
我是 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,
),
),
用动画容器包裹它并循环旋转它。根据需要调整值。您也可以在堆栈中使用它来实现问题中所示的结果。