[flutter] flutter 上如下出 左入右出 平移切换动画

[复制链接]
作者
n2n1   发布于2021-11-29 02:26:24 来自河北
flutter
flutter: 分享
  1. AnimatedSwitcher(
  2.         ///动画执行切换时间
  3.         duration: const Duration(milliseconds: 3000),


  4.         ///动画构建器 构建指定动画类型
  5.         transitionBuilder: (Widget child, Animation<double> animation) {

  6.           //Text移进的平移动画
  7.           Offset startOffset = Offset(0.0, -1.2);
  8.           Offset endOffset = Offset(0.0, 0.0);
  9.           if (animation.status == AnimationStatus.completed) {



  10.             //Text移出的平移动画
  11.             startOffset = Offset(0.0, 1.2);
  12.             endOffset = Offset(0.0, 0.0);
  13.           }
  14.           print("animation.status ${animation.status}");
  15.           //这里的核心内容是 动画的相互嵌套使用
  16.           //执行平移动画
  17.           return SlideTransition(
  18.             // 位置移动区分移动进入的Text 与 移动出去的Text
  19.             position: Tween(begin: startOffset, end: endOffset).animate(
  20.               CurvedAnimation(
  21.                 parent: animation,
  22.                 //动画曲线
  23.                 curve: Curves.ease,
  24.               ),
  25.             ),
  26.             //透明度渐变动画
  27.             child: FadeTransition(
  28.               // 透明度从 0.0-1.0
  29.               opacity: Tween(begin: 0.0, end: 1.0).animate(
  30.                 CurvedAnimation(
  31.                   parent: animation,
  32.                   curve: Curves.linear,
  33.                 ),
  34.               ),
  35.               //绽放动画
  36.               child: ScaleTransition(
  37.                 scale: Tween(begin: 0.6, end: 1.0).animate(
  38.                   CurvedAnimation(
  39.                     parent: animation,
  40.                     curve: Curves.linear,
  41.                   ),
  42.                 ),
  43.                 child: child,
  44.               ),
  45.             ),
  46.           );
  47.         },

  48.         ///执行动画的子 Widget
  49.         ///只有子 Widget 被切换时才会触发动画
  50.         child: yanzhengma?telHome(context):regHome(context),
  51.       ),
复制代码
水平移动
AnimatedSwitcher(
        ///动画执行切换时间
        duration: const Duration(milliseconds: 400),


        ///动画构建器 构建指定动画类型
        transitionBuilder: (Widget child, Animation<double> animation) {

          //Text移进的平移动画
          Offset startOffset = Offset(-1.0, 0);
          Offset endOffset = Offset(0.0, 0.0);
          if (animation.status == AnimationStatus.completed) {



            //Text移出的平移动画
            startOffset = Offset(1.0, 0);
            endOffset = Offset(0.0, 0.0);
          }
          print("animation.status ${animation.status}");
          //这里的核心内容是 动画的相互嵌套使用
          //执行平移动画
          return SlideTransition(
            // 位置移动区分移动进入的Text 与 移动出去的Text
            position: Tween(begin: startOffset, end: endOffset).animate(
              CurvedAnimation(
                parent: animation,
                //动画曲线
                curve: Curves.easeInOutSine,
              ),
            ),
           child:child,

          );
        },

        ///执行动画的子 Widget
        ///只有子 Widget 被切换时才会触发动画
        child: yanzhengma?telHome(context):regHome(context),
      ),



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 创建账号

本版积分规则

Archiver|小黑屋|( 冀ICP备2021005463号 )

GMT+8, 2024-3-29 20:56 , Processed in 0.118814 second(s), 29 queries , Gzip On.

N2N1 It社区 n2n1.cn

Copyright © 2001-2021,MeiCheng.

快速回复 返回顶部 返回列表