时间戳

首页 > 解决方案 > Flutter：AnimatedList动画曲线

flutter - Flutter：AnimatedList动画曲线

问题描述

如何在我的 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)
    );
  }
)

标签： flutteranimationflutter-animation

解决方案

您应该在Tween上调用链方法。chain方法采用CurveTween和CurveTween采用曲线

试试这个

    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));
        });

推荐阅读