Question

我的动画似乎有点滞后，我不确定为什么...

我有一个父窗口小部件-堆栈也使用提供程序来共享屏幕状态。根据状态（基本上是一个枚举），子窗口小部件（Child1，Child2，Child3）会更改其在堆栈中的位置（AnimatedPositioned）...

很重要的一点是，状态是从子状态更改的（它没有使用setState，提供程序正在处理此状态）。每个孩子都有一个按钮，按下该按钮可更改状态。像这样：

  void onPressChangeState(State state) {
    state.state = AnotherState;
  }

父窗口小部件：

class Parent extends StatefulWidget {
  @override
  _ParentState createState() => _ParentState();
}

class _ParentState extends State<Parent> {
  State state = State();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: ChangeNotifierProvider(
        create: (_) => state,
        child: Stack(
          // Each of the children takes care of its animation.
          children: [
            Child1(),
            Child2(),
            Child3(),
          ],
        ),
      ),
    );
  }
}

Child（s）小部件（它们遵循相同的结构）。请注意，子级小部件同时使用AnimatedPositioned（以便根据状态移动）和AnimatedOpacity（以便不透明度随状态而变化）。

class SignUpSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var media = MediaQuery.of(context);
    var width = media.size.width;
    var height = media.size.height * Sheet.heightRatio - media.padding.top;

    double yOffset;
    double xOffset;
    double opacity;

    var state = Provider.of<State>(context);
    switch (state.state) {
      case State1:
        yOffset = height;
        xOffset = 0;
        opacity = 1;
        break;
      case State2:
        yOffset = 0 - media.viewInsets.bottom;
        xOffset = 0;
        opacity = 1;
        break;
      case State3:
        height += 25;
        yOffset = 0 - media.viewInsets.bottom;
        xOffset = 10;
        opacity = 0.4;
        break;
    }

    return AnimatedPositioned(
      width: width,
      height: height,
      duration: Duration(milliseconds: 1000),
      curve: Curves.fastLinearToSlowEaseIn,
      bottom: -offset,
      child: AnimatedOpacity(
         opacity: opacity,
         duration: Duration(milliseconds: 1000),
         curve: Curves.fastLinearToSlowEaseIn,
         child: Column(...),
    );
  }
}

我认为我的问题与子代小部件无状态且重建过多有关。滞后不是很多，但是很明显。

Answer 1

我使用剖析模式构建了该应用程序，动画更加流畅。我在优化讨论中看到，我们不应该基于调试模式评估动画，而应该使用概要分析。

颤抖的滞后动画

1 个答案: