如何使用flutter_animate实现图片的循环扫光动画？

你可以通过给图片叠加渐变遮罩层，配合flutter_animate的平移动画实现目标效果，既不会修改图片本身颜色，又能循环播放扫光动画：

核心实现思路 #

• 用Stack包裹原始图片和渐变遮罩，遮罩采用透明-高亮-透明的线性渐变
• 给遮罩添加横向平移动画，让它完整滑过图片区域
• 设置遮罩的混合模式为lighten，仅提亮图片区域，保留原有色彩

完整代码示例 #

Positioned(
  left: 93.w,
  top: 399.h,
  child: Stack(
    children: [
      // 原始图片
      Image.asset(
        'assets/images/logo.png',
        height: 94.h,
        width: 224.w,
      ),
      // 扫光遮罩层
      SizedBox(
        height: 94.h,
        width: 224.w,
        child: ClipRect(
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  Colors.transparent,
                  Colors.white.withOpacity(0.7),
                  Colors.transparent,
                ],
                stops: const [0.2, 0.5, 0.8], // 控制高亮区域宽度
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
              ),
            ),
          ).animate(
            onPlay: (controller) => controller.repeat(
              period: const Duration(milliseconds: 1500), // 动画周期
              reverse: false,
            ),
          ).translate(
            begin: const Offset(-1.0, 0), // 从图片左侧外开始
            end: const Offset(1.0, 0), // 滑到图片右侧外结束
            curve: Curves.easeInOut,
          ),
        ),
      ),
    ],
  ),
)

参数调整说明 #

• 修改period的数值可以控制扫光速度，数值越小动画越快
• 调整LinearGradient的stops参数，能改变高亮条的粗细
• 若需要从右到左的扫光效果，互换translate的begin和end偏移量即可

内容的提问来源于stack exchange，提问作者Mehedi Hasan