Android Flutter在点击事件上添加动画效果

在android app的开发项目中，我们需要在点击事件上实现一个动画效果来提高用户的体验度。比如闲鱼底部中间按钮的那种。该怎么实现呢？ 一起来看看吧

实现效果如图：

​实现思路

根据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、底部四个栏目变速上移动画+渐变动画

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