前言

目前正在做的项目，为了增加用户的体验度，准备增加一些动画效果，其中底部栏中间按钮的点击事件参考了闲鱼的动效，便在此基础上仿写了该动效，并增加了一些新的效果。

动效

闲鱼动效

仿写效果

思路

根据UI的设计图，对每个模块设计好动画效果，本人主要设计了以下四个效果。

1、底部返回键旋转动画

底部返回按钮动画其实就是个旋转动画，利用Transform.rotate设置angle的值即可，这里使用了GetX来对angle进行动态控制。

//返回键旋转角度，初始旋转45度，使其初始样式为 +

var angle = (pi / 4).obs;


///关闭按钮旋转动画控制器

late final AnimationController closeController;

late final Animation<double> closeAnimation;


///返回键旋转动画

closeController = AnimationController(

  duration: const Duration(milliseconds: 300),

  vsync: provider,

);


///返回键旋转动画

closeController = AnimationController(

  duration: const Duration(milliseconds: 300),

  vsync: provider,

);


///页面渲染完才开始执行，不然第一次打开不会启动动画

WidgetsBinding.instance.addPostFrameCallback((duration) {

  closeAnimation =

      Tween(begin: pi / 4, end: pi / 2).animate(closeController)

        ..addListener(() {

          angle.value = closeAnimation.value;

        });

  closeController.forward();

});



///关闭按钮点击事件

void close() {

  ///反转动画，并关闭页面

  Future.delayed(

     const Duration(milliseconds: 120), () {

    Get.back();

  });


  closeController.reverse();

}



IconButton(

    onPressed: null,

    alignment: Alignment.center,

    icon: Transform.rotate(

      angle: controller.angle.value,

      child: SvgPicture.asset(

        "assets/user/ic-train-car-close.svg",

        width: 18,

        height: 18,

        color: Colors.black,

      ),

    ))

2、底部四个栏目变速上移动画+渐变动画

四个栏目其实就是个平移动画，只不过闲鱼是四个栏目一起平移，而我选择了变速平移，这样视觉效果上会好一点。

//透明度变化

List<AnimationController> opacityControllerList = [];

//上移动画，由于每个栏目的移动速度不一样，需要用List保存四个AnimationController，

//如果想像闲鱼那种整体上移，则只用一个AnimationController即可。

List<AnimationController> offsetControllerList = [];

List<Animation<Offset>> offsetAnimationList = [];


//之所以用addIf，是因为项目中这几个栏目的显示是动态显示的，这里就直接写成true

Column(

    children: []

      ..addIf(

          true,

          buildItem('assets/user/ic-train-nomal-car.webp',"学车加练","自主预约，快速拿证"))

      ..addIf(

          true,

          buildItem('assets/user/ic-train-fuuxn-car.webp',"有证复训","优质陪练，轻松驾车"))

      ..addIf(

          true,

          buildItem('assets/user/ic-train-jiaxun-car.webp',"模拟加训","考前加训，临考不惧"))

      ..addIf(

          true,

          buildItem('assets/user/ic-train-jiakao-car.webp',"驾考报名","快捷报名无门槛"))

      ..add(playWidget())

      ..addAll([

        17.space,

      ]),

   )


//仅仅是为了在offsetController全部初始化完后执行play()

Widget playWidget() {

  //执行动画

  play();

  return Container();

}


int i = 0;


Widget buildItem(String img,String tab,String slogan) {

  //由于底部栏目是动态显示的，需要在创建Widget时一同创建offsetController和offsetAnimation

  i++;

  AnimationController offsetController = AnimationController(

    duration: Duration(milliseconds: 100 + i * 20),

    vsync: this,

  );

  Animation<Offset> offsetAnimation = Tween<Offset>(

    begin: const Offset(0, 2.5),

    end: const Offset(0, 0),

  ).animate(CurvedAnimation(

    parent: offsetController,

    // curve: Curves.easeInOutSine,

    curve: const Cubic(0.12, 0.28, 0.48, 1),

  ));


  AnimationController opacityController = AnimationController(

      duration: const Duration(milliseconds: 500),

      lowerBound: 0.2,

      upperBound: 1.0,

      vsync: this);


  opacityControllerList.add(opacityController);

  offsetControllerList.add(offsetController);

  offsetAnimationList.add(offsetAnimation);


  return SlideTransition(

    position: offsetAnimation,

    child: FadeTransition(

        opacity: opacityController,

        child: Container(

            margin: EdgeInsets.only(bottom: 16),

            height: 62,

            decoration: BoxDecoration(

                borderRadius: BorderRadius.all(Radius.circular(12)),

                color: const Color(0xfffafafa)),

            child:

            Row(mainAxisAlignment: MainAxisAlignment.center, children: [

              24.space,

              Image.asset(img, width: 44, height: 44),

              12.space,

              Column(

                  crossAxisAlignment: CrossAxisAlignment.start,

                  mainAxisSize: MainAxisSize.min,

                  children: [

                    Text(tab,

                        style: const TextStyle(

                            color: Color(0XFF000000),

                            fontSize: 16,

                            fontWeight: FontWeight.bold)),

                    Text(slogan,

                        style: const TextStyle(

                            color: Color(0XFF6e6e6e), fontSize: 12)),

                  ]).expanded,

              Image.asset("assets/user/ic-train-arrow.webp",

                  width: 44, height: 44),

              17.space

            ])).inkWell(

            onTap: () {},

            delayMilliseconds: 50)),

  );

}


//执行动画

void play() async {

  for (int i = 0; i < offsetControllerList.length; i++) {

    opacityControllerList[i].forward();


    ///栏目正序依次延迟(40 + 2 * i) * i的时间,曲线速率

    Future.delayed(Duration(milliseconds: (40 + 2 * i) * i), () {

      offsetControllerList[i]

          .forward()

          .whenComplete(() => offsetControllerList[i].stop());

    });

  }

}




///关闭按钮点击事件

void close() {

  ///反转动画，并关闭页面

  Future.delayed(

     const Duration(milliseconds: 120), () {

    Get.back();

  });


  for (int i = offsetControllerList.length - 1; i >= 0; i--) {

    ///栏目倒叙依次延迟(40 + 2 * (offsetControllerList.length-1-i)) * (offsetControllerList.length-1-i))的时间

    Future.delayed(

        Duration(

            milliseconds:

            (40 + 2 * (offsetControllerList.length-1-i)) * (offsetControllerList.length-1-i)), () {

      offsetControllerList[i].reverse();

    });

  }

  opacityTopController.reverse();

}

3、中间图片渐变动画

渐变动画使用FadeTransition即可。

///图片透明度渐变动画控制器

late final AnimationController imgController;


///图片透明度渐变动画

imgController = AnimationController(

    duration: const Duration(milliseconds: 500),

    lowerBound: 0.0,

    upperBound: 1.0,

    vsync: provider);

imgController.forward().whenComplete(() => imgController.stop());


///渐变过渡

FadeTransition(

  opacity: imgController,

  child:

  Image.asset("assets/user/ic-traincar-guide.webp"),

),


///关闭按钮点击事件

void close() {

  imgController.reverse();

}

4、顶部文案渐变动画+下移动画

///顶部标题下移动画控制器

late final AnimationController offsetTopController;

late final Animation<Offset> offsetTopAnimation;


///顶部标题渐变动画控制器

late final AnimationController opacityTopController;



///顶部标题上移动画

offsetTopController = AnimationController(

  duration: const Duration(milliseconds: 300),

  vsync: provider,

);

offsetTopController

    .forward()

    .whenComplete(() => offsetTopController.stop());

offsetTopAnimation = Tween<Offset>(

  begin: const Offset(0, -0.8),

  end: const Offset(0, 0),

).animate(CurvedAnimation(

  parent: offsetTopController,

  curve: Curves.easeInOutCubic,

));

offsetTopController

    .forward()

    .whenComplete(() => offsetTopController.stop());


//UI

SlideTransition(

    position: offsetTopAnimation,

    child: FadeTransition(

        opacity: opacityTopController,

        child: Column(

          crossAxisAlignment: CrossAxisAlignment.start,

          mainAxisAlignment: MainAxisAlignment.start,

          mainAxisSize: MainAxisSize.min,

          children: [

            80.space,

            const Text(

              '练车指南',

              style: TextStyle(

                color: Color(0XFF141414),

                fontSize: 32,

                fontWeight: FontWeight.w800,

              ),

            ),

            2.space,

            const Text('易练只为您提供优质教练，为您的安全保驾护航',

                style: TextStyle(

                    color: Color(0XFF141414),

                    fontSize: 15)),

          ],

        ))),



///关闭按钮点击事件

void close() {

  offsetTopController.reverse();

  opacityTopController.reverse();


}

5、注销动画

最后，在关闭页面的时候不要忘记注销动画。

///关闭时注销动画

void dispose() {

  for (int i = offsetControllerList.length - 1; i > 0; i--) {

    offsetControllerList[i].dispose();

  }

  offsetTopController.dispose();

  opacityTopController.dispose();

  imgController.dispose();

  closeController.dispose();

}