如何在Flutter中实现类似视频的动画

Question

我正在尝试实现下面视频链接中的动画：

动画视频

正在动画化的图标是一个带有三个箭头的

SVG

文件。箭头不是单独的图像或图标资源。

所以，我试图实现的目标是，我使用了

flutter_svg

和

flutter_animate

包。

首先，我添加了SVG文件并赋予其绿色，然后添加了shimmer效果（没有得到预期的结果）。这是代码片段。

SvgPicture.asset(
            'assets/icons/down_arrows.svg',
            height: 32.h,
            width: 32.h,
            colorFilter: const ColorFilter.mode(
              AppColors.bottomNavIconGreen,
              BlendMode.srcIn,
            ),
          )
              .animate(
                  onPlay: (controller) => controller.repeat(period: 3000.ms))
              .shimmer(
                color: AppColors.mainGreen,
                angle: 1.5,
              ),

请帮助我用这种方法或任何其他方式实现像视频一样的动画。提前谢谢大家。

Answer 1

请查看此视频。相信一定会有好处的。