如何在图像上实现标题“Flutter Animate Example”的类似动画？

Question

我在我的 flutter 应用程序中使用

flutter_animate 4.4.0 

包。

我正在尝试在特定的小部件上实现动画，例如此屏幕的标题：Animation gif

我只是想实现在图像上循环运行的阴影。

到目前为止我所做的是：

Positioned(
        left: 93.w,
        top: 399.h,
        child: Image.asset(
          'assets/images/logo.png',
          height: 94.h,
          width: 224.w,
            ).animate(
                delay: 500.ms,
                onPlay: (controller) =>
                   controller.repeat(period: 500.milliseconds)).tint(
                  color: Colors.white.withOpacity(0.5),
                ),
          ),

我也尝试过

Shimmer.fromColors()

。但是，

baseColor

属性会更改图像的颜色。

我感谢您的所有帮助。

Answer 1

使用这个package来实现标题动画。

    SizedBox(
  width: 200.0,
  height: 100.0,
  child: Shimmer.fromColors(
    baseColor: Colors.red,
    highlightColor: Colors.yellow,
    child: Text( // you can add any widget
      'Yor Text',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 40.0,
        fontWeight:
        FontWeight.bold,
      ),
    ),
  ),
);

Answer 2

您不需要使用

shimmer

包，因为

flutter_animate

也提供了该功能，您看到的附加颜色来自

tint

扩展

这是一个工作示例：https://zapp.run/edit/flutter-z43a06n743b0?entry=lib/main.dart&file=lib/main.dart

代码：

class ShimmerSample extends StatelessWidget {
  const ShimmerSample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image.network('https://i.imgur.com/nYxw0ES.png')
            .animate(delay: 500.ms, onPlay: (controller) => controller.repeat(period: 500.milliseconds))
            .shimmer(color: Colors.white.withOpacity(0.5)),
      ),
    );
  }
}

看起来像这样：