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

最新推荐文章于 2024-05-15 22:33:04 发布

不入流HarmonyOS开发

最新推荐文章于 2024-05-15 22:33:04 发布

阅读量879

点赞数

分类专栏： Android技术文章标签： android flutter 动画

本文链接：https://blog.csdn.net/m0_70749039/article/details/129740264

版权

本文介绍了在Android Flutter应用中如何为点击事件添加动画效果，以提升用户体验。详细讲解了底部返回键的旋转动画、栏目变速上移动画和渐变、中间图片及顶部文案的动画实现，以及在关闭页面时的注销动画操作。

摘要由CSDN通过智能技术生成

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

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