颤振滑块动画

Question

我编写的这段代码基本上是一个滑动条，其固定值在0到100之间。当我按下随机播放按钮时，其值（jovirometro.toDouble变量）会发生变化。我只想制作一个动画，它可以从一个值滑动到另一个。用户不与滑块互动。

这是现在的样子

child: Container(
  height: 10,
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black, width: 0.1),
    gradient: LinearGradient(
        colors: [
          Colors.red,
          Colors.redAccent,
          Colors.white,
          Colors.lightGreenAccent,
          Colors.green
        ]
    ),
    borderRadius: BorderRadius.circular(10),
  ),
  child: SliderTheme(
    data: SliderTheme.of(context).copyWith(
      activeTrackColor: Colors.white,
      inactiveTrackColor: Colors.white,
      trackHeight: 0.1,
      thumbColor: Colors.white,
      thumbShape: CustomSliderThumbShape(enabledThumbRadius: 10),
      overlayColor: Colors.white.withAlpha(1),
    ),
    child: Slider(
      min: 0,
      max: 100,
      value: jovirometro.toDouble(),
      onChanged: (value){setState((){});},
    ),
  ),
),

jovirometro的变量是

var jovirometro = snapshot.data.documents[_word]['jovirometro'];

从Firestore服务器，然后按随机播放按钮更改“ _word”参数。

Answer 1

我遇到了同样的问题，并设法用AnimatedBuilder解决了我的问题。

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              height: 10,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black, width: 0.1),
                gradient: LinearGradient(colors: [
                  Colors.red,
                  Colors.redAccent,
                  Colors.white,
                  Colors.lightGreenAccent,
                  Colors.green
                ]),
                borderRadius: BorderRadius.circular(10),
              ),
              child: AnimatedBuilder(
                animation: _animationController,
                builder: (_, __) {
                  return SliderTheme(
                    data: SliderTheme.of(context).copyWith(
                      activeTrackColor: Colors.white,
                      inactiveTrackColor: Colors.white,
                      trackHeight: 0.1,
                      thumbColor: Colors.white,
                      overlayColor: Colors.white.withAlpha(1),
                    ),
                    child: Slider(
                      value: _animationController.value,
                      onChanged: null,
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _animationController.animateTo(Random().nextDouble());
        },
        child: Icon(Icons.autorenew),
      ),
    );
  }
}

我已经根据您的代码及其解决方案创建了一个Codepen。

https://codepen.io/pczn0327/pen/XWXYKap

Answer 2

在对此提出疑问之前，您应该进行一些研究以尝试自己解决问题。我认为Flutter提供了出色的文档，甚至还有Animations tutorial都会对您有很大帮助。

对于您的情况，您应该使用AnimationController。

您需要将with SingleTickerProviderStateMixin添加到State的{​​{1}}中，在StatefulWidget中实例化控制器，并添加一个侦听器以按值调用initState更改：

setState

和_controller = AnimationController( vsync: this, duration: widget.duration, upperBound: 100.0, ); ..addListener(() { setState(() { }); 中的dispose：

dispose

您可以使用_controller.dispose(); 来获取动画的当前值，该值应传递给_controller.value：

Slider

现在，无论何时要为滑块调用child: Slider( min: 0, max: 100, value: _controller.value, onChanged: (value){setState((){});}, ), 的值设置动画或使用animateTo进行动画设置的众多方法之一，都将AnimationController设置为期望值，并（可选）设置动画的target和Duration。