颤动 LinearProgressIndicator 曲线

LinearProgressIndicator是Flutter中常用的widget之一，可以用来显示线性进度条。而颤动效果则可以给进度条增添一份活力感。下面将介绍如何在Flutter中实现颤动 LinearProgressIndicator 曲线。

实现思路

Flutter中可以使用Animation来实现动画效果。所以，我们可以通过Tween和Curve来控制动画，实现颤动效果。

示例代码

class ShakyLinearProgressIndicator extends StatefulWidget {
  @override
  _ShakyLinearProgressIndicatorState createState() => _ShakyLinearProgressIndicatorState();
}

class _ShakyLinearProgressIndicatorState extends State<ShakyLinearProgressIndicator> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 1000));
    _animation = Tween<double>(begin: -0.05, end: 0.05).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));
    _controller.repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return LinearProgressIndicator(
          value: null,
          backgroundColor: Colors.grey[200],
          valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
          semanticsLabel: 'Linear progress indicator',
          semanticsValue: 'Linear progress indicator',
          minHeight: 10,
          valueThickness: 5,
          // 在这里使用Transform偏移
          transform: Matrix4.translationValues(_animation.value * 10, 0, 0),
        );
      },
    );
  }
}

说明

1. 在initState中，我们创建了一个AnimationController和Animation，并设置动画执行时间为1000ms，以及重复播放动画。
2. 在build方法中，我们使用AnimatedBuilder来完成渐变动画的构建，其中创建了一个LinearProgressIndicator的实例。
3. 我们在transform属性中使用了Matrix4.translationValues来进行偏移，偏移值是_animatin.value*10，也就是根据_animation的值来进行偏移。
4. 在使用ShakyLinearProgressIndicator时，直接调用即可。

结论

本文介绍了如何在Flutter中通过使用Animation和Curve来实现颤动 LinearProgressIndicator 曲线的效果，通过调节Curve和Animation的参数，可以实现更多样式的动画效果。