【flutter】动画、跳转

1、跳转时的方法

Navigator.of(context).push(CustomRoute(SecondScreen(name:name), "ScaleTransition"));
//获取返回值
Navigator.of(context).push(CustomRoute(SecondScreen(name:name), "SlideTransition")).then( (result){
      b=result;
    });
b = await Navigator.push(
        context,
        MaterialPageRoute(
            builder:(context)=>SecondScreen(name:name)//新页面
        )
    );

2、封装的动画

import 'package:flutter/material.dart';


class CustomRoute extends PageRouteBuilder{
  final Widget widget;
  final String type;
  CustomRoute(this.widget,this.type)
      :super(
      transitionDuration:const Duration(milliseconds:500),//动画时间
      pageBuilder:(
          BuildContext context,
          Animation<double> animation1,
          Animation<double> animation2){
        return widget;
      },
      transitionsBuilder:(
          BuildContext context,
          Animation<double> animation1,
          Animation<double> animation2,
          Widget child){
        switch (type) {
          case "FadeTransition"://淡入淡出
            return FadeTransitionNew(animation1,child);
          case "ScaleTransition"://缩放路由动画
            return ScaleTransitionNew(animation1,child);
          case "RotationTransition"://旋转+缩放路由动画
            return RotationTransitionNew(animation1,child);
          case "SlideTransition"://左右滑动路由动画
            return SlideTransitionNew(animation1,child);
        }
      }
  );

  /**
   * 淡入淡出
   */
  static FadeTransitionNew(Animation<double> animation1,Widget child){
    return FadeTransition(
      opacity: Tween(begin:0.0,end :1.0).animate(CurvedAnimation(
          parent:animation1,
          curve:Curves.fastOutSlowIn
      )),
      child: child,
    );
  }

  /**
   * 缩放路由动画
   */
  static ScaleTransitionNew(Animation<double> animation1,Widget child){
    return ScaleTransition(
        scale:Tween(begin:0.0,end:1.0).animate(CurvedAnimation(
            parent:animation1,
            curve: Curves.fastOutSlowIn
        )),
        child:child
    );
  }
  /**
   * 旋转+缩放路由动画
   */
  static RotationTransitionNew(Animation<double> animation1,Widget child){
    return RotationTransition(
        turns:Tween(begin:0.0,end:1.0)
            .animate(CurvedAnimation(
            parent: animation1,
            curve: Curves.fastOutSlowIn
        )),
        child:ScaleTransition(
          scale:Tween(begin: 0.0,end:1.0)
              .animate(CurvedAnimation(
              parent: animation1,
              curve:Curves.fastOutSlowIn
          )),
          child: child,
        )
    );
  }

  /**
   * 左右滑动路由动画
   */
  static SlideTransitionNew(Animation<double> animation1,Widget child){
    // 幻灯片路由动画
    return SlideTransition(
      position: Tween<Offset>(
          begin: Offset(-1.0, 0.0),
          end:Offset(0.0, 0.0)
      )
          .animate(CurvedAnimation(
          parent: animation1,
          curve: Curves.fastOutSlowIn
      )),
      child: child,
    );
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值