Flutter：AnimatedList动画曲线

Question

如何向 AnimatedList 的动画添加曲线（例如 Curves.easeIn）？

AnimatedList(
  key: _animList,
  initialItemCount: _myList.length,
  itemBuilder: (context, index, animation) {
    return SlideTransition(
      position: animation.drive(Tween(begin: Offset(1, 0), end: Offset(0, 0))), <-- curve?
      child: Container(color: Colors.red, height: 100, width: 100)
    );
  }
)

Answer 1

您应该在 Tween 上调用 chain 方法。 chain 方法采用 CurveTween 而 CurveTween 采用 curve

试试这个

    AnimatedList(
        key: _animList,
        initialItemCount: _myList.length,
        itemBuilder: (context, index, animation) {
          return SlideTransition(
              position: animation.drive(
                  Tween(begin: Offset(1, 0), end: Offset(0, 0))
                      .chain(CurveTween(curve: Curves.bounceIn))),
              child: Container(color: Colors.red, height: 100, width: 100));
        });

Flutter：AnimatedList动画曲线

Flutter: AnimatedList animation curve

animation

flutter

flutter-animation