使用 LinearProgressIndicator 实现颤振效果

在 Flutter 中，LinearProgressIndicator 是一个常用的图形控件，可用于显示某个耗时操作的进度。而通过对 LinearProgressIndicator 的一些属性进行调整，还可以实现很有趣的颤振效果。

属性介绍

LinearProgressIndicator 有许多可控制的属性，这里列举一些常用的属性：

• value: 进度条的当前值，范围为 0-1。
• backgroundColor: 进度条的背景颜色。
• valueColor: 进度条的前景颜色，可以使用 AlwaysStoppedAnimation 来创建一个渐变动画。
• semanticsLabel: 进度条的语义标签。

实现颤振效果的方法

要实现颤振效果，就需要让进度条的进度值不断的在一定范围内震荡。这里提供两种实现方法：

方法一：使用 Timer

使用 Timer 可以让进度条的进度值在一定时间间隔内不断的变化。具体代码如下：

import 'dart:async';
import 'package:flutter/material.dart';

class VibratingProgressIndicator extends StatefulWidget {
  const VibratingProgressIndicator({Key? key}) : super(key: key);

  @override
  _VibratingProgressIndicatorState createState() => _VibratingProgressIndicatorState();
}

class _VibratingProgressIndicatorState extends State<VibratingProgressIndicator> {
  double _progressValue = 0.0;

  @override
  void initState() {
    super.initState();
    _startTimer();
  }

  void _startTimer() {
    Timer.periodic(Duration(milliseconds: 50), (timer) {
      setState(() {
        _progressValue += 0.01;

        if (_progressValue >= 0.9 || _progressValue <= 0.1) {
          _progressValue = 0.5;
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return LinearProgressIndicator(
      value: _progressValue,
      backgroundColor: Colors.grey[200],
      valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
      semanticsLabel: 'Vibrating Progress Indicator',
    );
  }
}

方法二：使用 AnimationController

使用 AnimationController 可以创建一个动画控制器，使进度条的进度值在一定范围内不断的变化。具体代码如下：

import 'package:flutter/material.dart';

class VibratingProgressIndicator extends StatefulWidget {
  const VibratingProgressIndicator({Key? key}) : super(key: key);

  @override
  _VibratingProgressIndicatorState createState() => _VibratingProgressIndicatorState();
}

class _VibratingProgressIndicatorState extends State<VibratingProgressIndicator> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 1000),
    )..repeat(reverse: true);

    _controller.addListener(() {
      setState(() {});
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final progressValue = _controller.value;

    return LinearProgressIndicator(
      value: progressValue >= 0.5 ? 1.0 - progressValue : progressValue,
      backgroundColor: Colors.grey[200],
      valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
      semanticsLabel: 'Vibrating Progress Indicator',
    );
  }
}

效果预览

使用以上方法实现的颤振效果如下所示：

总结

通过调整进度条的属性和使用 Timer 或者 AnimationController，可以实现很有趣的颤振效果。不过在实际开发中，建议只在某些场景下使用此效果，避免增加用户的视觉负担。