• pub

  dependencies:
    pageviewj: ^0.0.3
  

部分已实现效果如下

PageViewJ.aniBuilder

PageViewJ.aniBuilder(
     aniItemBuilder: pageviewAniItem,
)

PageViewJ.aniBuilder(
     /// HeroCard.dart
     aniItemBuilder: heroAniItem,
)

RotateTransform

PageViewJ(
     modifier: const Modifier(viewportFraction: .73),
     transform: RotateTransform(),
     itemBuilder: pageViewItem,
)

StackTransform

PageViewJ(
   modifier: const Modifier(viewportFraction: .73,padEnds: false,
                            scrollDirection: Axis.vertical),
   transform: StackTransform(), itemBuilder: pageViewItem,
)

ClipTransform

PageViewJ(
    modifier: const Modifier(scrollDirection: Axis.vertical),
    transform: ClipTransform(),
    itemBuilder: pageViewItem,
),

FlipTransform

PageViewJ(
   modifier: const Modifier(scrollDirection: Axis.horizontal,clipBehavior: Clip.none),
   transform: FlipTransform(),
   itemBuilder: pageViewItem,
)

ShuttersFlipTransform

PageViewJ(
   transform: ShuttersFlipTransform(),
   itemBuilder: pageViewItem,
)

CubeTransform

PageViewJ(
   transform: CubeTransform(),
   itemBuilder: pageViewItem,
)

ShuttersCubeTransform

PageViewJ(
   transform: ShuttersCubeTransform(),
   itemBuilder: pageViewItem,
)

SlowTransform

PageViewJ(
   transform: SlowTransform(),
   itemBuilder: pageViewItem,
)

如何基于此实现自己的效果

• 页面中对其child做动画 使用如下构造方法基于index,aniValue实现

  PageViewJ.aniBuilder(
    aniItemBuilder: (BuildContext context, int index, double page, double aniValue) {
    },
  ),
  

• 对整个页面做动画

  PageViewJ(
    transform: 继承PageTransTorm自己实现页面动画,
    itemBuilder: 具体页面,
  ),
  
  ==================================
  abstract class PageTransform {
    Modifier? modifier;
    PageTransform();
    ///
    ///  if (page == index) {
    ///     /// 静止状态
    ///   } else if (page > index) {
    ///     
    ///   } else {
    ///     
    ///   }
    Widget transform(int index, double page, double aniValue, Widget child);
  }