欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【flutter】动画

程序员文章站 2024-01-14 17:40:16
...

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,
    );
  }
}

上一篇: Flutter动画

下一篇: c++判断素数