如何在Flutter中制作手势驱动动画？

Question

我是Flutter的新手，目前，我正在尝试制作可滑动的底部面板，以使某些文本的不透明度具有动画效果（仅此刻）。

这基本上是我要实现的动画

我通过Saed Nabil找到了这个答案，该答案创建了一个底页并获得了它的位置。

如何根据拖动百分比为Text设置动画？

Answer 1

基于Saed Nabil的响应，我对他的样本进行了一些调整，使用TextStyle.lerp根据拖动的位置获得文本样式。

StreamController<double> controller = StreamController.broadcast();

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

const defaultTextStyle = TextStyle(
  color: Colors.blue,
  fontSize: 15,
);

class _MyWidgetState extends State<MyWidget> {
  double position;
  TextStyle textStyle = defaultTextStyle;

  @override
  Widget build(BuildContext context) {
    final maxPosition = MediaQuery.of(context).size.height - 300;
    return Container(
      child: Center(
        child: RaisedButton(
            child: Text('Show Buttom Sheet'),
            onPressed: () {
              showModalBottomSheet(
                  isScrollControlled: true,
                  context: context,
                  builder: (context) {
                    return StreamBuilder(
                      stream: controller.stream,
                      builder: (context, snapshot) => GestureDetector(
                          onVerticalDragUpdate: (DragUpdateDetails details) {
                            position = MediaQuery.of(context).size.height -
                                details.globalPosition.dy;
                            double newPosition = position;
                            if (position.isNegative || position == 0)
                              Navigator.pop(context);
                            else {
                              if (position > maxPosition) {
                                newPosition = maxPosition;
                              }
                              controller.add(newPosition);
                            }

                            textStyle = TextStyle.lerp(
                                defaultTextStyle,
                                TextStyle(
                                  color: Colors.black,
                                  fontSize: 24,
                                ),
                                newPosition / maxPosition);
                          },
                          behavior: HitTestBehavior.translucent,
                          child: Container(
                            color: Colors.white,
                            height: snapshot.hasData ? snapshot.data : 50.0,
                            width: double.infinity,
                            child: Text(
                              'Reviews',
                              style: textStyle,
                              textAlign: TextAlign.center,
                            ),
                          )),
                    );
                  });
            }),
      ),
    );
  }
}

结果

Answer 2

取决于您用于模态底板的解决方案，您应该能够隔离出根据底板而变化的变量。通常，这是通过某些小部件提供的controller来实现的；对于Saed Nabil，他是将该变量提供给自定义变量的。

只要有了变量，您就应该能够通过类似这样的方式向Text小部件上的Opacity小部件提供简单的数学运算。

假设您的变量从0、0.1、0.111、0.222 ..... 1。您可以执行以下操作：

double opacity = 1 - controller.position;

Opacity(
  opacity: opacity,
  child: Text(),
);