# 前言目前正在做的项目，为了增加用户的体验度，准备增加一些动画效果，其中底部栏中间按钮的点击事件参考了闲鱼的动效，便在此基础上仿写了该动效，并增加了一些新的效果。 # 动效 ## 闲鱼动效 ![闲鱼gif.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f4f7397a49304291ab1e938dd98e382b~tplv-k3u1fbpfcp-watermark.image?) ## 仿写效果 ![动效gif.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dc82d7f9b9e8478fba58055fb73cb85b~tplv-k3u1fbpfcp-watermark.image?) # 思路根据UI的设计图，对每个模块设计好动画效果，本人主要设计了以下四个效果。 ## 1、底部返回键旋转动画底部返回按钮动画其实就是个旋转动画，利用``Transform.rotate``设置``angle``的值即可，这里使用了GetX来对angle进行动态控制。 ```` //返回键旋转角度，初始旋转45度，使其初始样式为 + var angle = (pi / 4).obs; ///关闭按钮旋转动画控制器 late final AnimationController closeController; late final Animation 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 opacityControllerList = []; //上移动画，由于每个栏目的移动速度不一样，需要用List保存四个AnimationController， //如果想像闲鱼那种整体上移，则只用一个AnimationController即可。 List offsetControllerList = []; List> 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 offsetAnimation = Tween( 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 offsetTopAnimation; ///顶部标题渐变动画控制器 late final AnimationController opacityTopController; ///顶部标题上移动画 offsetTopController = AnimationController( duration: const Duration(milliseconds: 300), vsync: provider, ); offsetTopController .forward() .whenComplete(() => offsetTopController.stop()); offsetTopAnimation = Tween( 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(); } ```