如何在flutter中实现这个动画？

Question

我正在尝试在 Flutter 中实现轮播动画，当用户在轮播中向左或向右滑动时，项目会从左上角或右上角平滑过渡到屏幕中心，我如何在 Flutter 中实现这一点。

像这样的动画轮播

Answer 1

查看 https://pub.dev/packages/infinite_carousel 它有一些不错的功能来调整你的动画。您基本上需要添加自定义

itemBuilder

并在其中使用

AnimatedBuilder

。由于动画提供了

ScrollController

，您还可以应用

InfiniteCarousel.builder

并使用偏移量来制作您想要的动画。

InfiniteCarousel.builder(
   itemCount: WorkoutShareTemplate.values.length,
   itemExtent: maxItemWidth,
   loop: false,
   anchor: 0.5,
   controller: _scrollController,
   itemBuilder: (context, itemIndex, _) {
      return AnimatedBuilder(
          animation: _scrollController,
          builder: (context, child) {
             final currentOffset = maxItemWidth * itemIndex;
             final diff = _scrollController.offset - currentOffset;
             final carouselRatio = maxItemWidth / maxPadding;
             final padding = (diff / carouselRatio).abs().floor();
             // ...
          }
      );
   }