Flutter页面过渡动画插件easy_transition的使用

easy_transition

Flutter包，用于轻松为页面导航添加动画。它提供了缩放和淡入淡出两种过渡效果。

由Omar Mouki创建

GitHub
LinkedIn

使用

只需添加[EasyTransition]小部件并提供子部件和目标页面即可。默认构造函数将创建一个缩放动画：

Center(
  child: EasyTransition(
    child: Icon(Icons.ac_unit),
    pageToPush: SecondPage(),
  ),
),

该包支持多种动画类型和推送类型。以下示例将使用PushAndRemoveUntil推送类型，并提供可选的transitionAlignment和curve。

Center(
  child: EasyTransition.scalePushAndRemoveUntil(
    child: Icon(Icons.ac_unit),
    pageToPush: SecondPage(),
    transitionAlignment: Alignment.center,
    curve: Curves.decelerate,
  ),
),

这将创建一个淡入淡出动画。

Center(
  child: EasyTransition.fadePushReplacement(
    child: Icon(Icons.ac_unit),
    pageToPush: SecondPage(),
  ),
),

属性

/// 必需参数适用于所有构造函数

/// [child] 是点击时激活导航的小部件
final Widget child;

/// [pageToPush] 是要导航到的目标页面
final Widget pageToPush;

/// 可选参数适用于所有缩放构造函数和默认构造函数

/// [transitionDurationMilliseconds] 推送动画的时间，默认为 [transitionDurationMilliseconds = 500]
int? transitionDurationMilliseconds;

/// [reverseTransitionDurationMilliseconds] 弹出动画的时间，默认为 [reverseTransitionDurationMilliseconds = 200]
int? reverseTransitionDurationMilliseconds;

/// 缩放动画的起始点
Alignment? transitionAlignment;

/// 缩放导航的推送动画类型
Curve? curve;

/// 缩放导航的弹出动画类型
Curve? reverseCurve;

示例代码

以下是一个完整的示例代码，展示如何使用easy_transition插件实现不同的页面过渡动画。

import 'package:easy_transition/easy_transition.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Easy Transition'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          // 默认缩放动画
          EasyTransition(
            child: Card(
              child: Container(
                height: 150,
                child: Center(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Text('默认缩放动画'),
                      Icon(Icons.person)
                    ],
                  ),
                ),
              ),
            ),
            pageToPush: SecondPage(),
            transitionDurationMilliseconds: 400,
            transitionAlignment: Alignment.center,
            curve: Curves.decelerate,
          ),
          // 淡入淡出动画
          EasyTransition.fadePushReplacement(
            child: Card(
              child: Container(
                height: 150,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text('淡入淡出动画'),
                    Icon(Icons.phone_android)
                  ],
                ),
              ),
            ),
            pageToPush: SecondPage(),
          ),
          // 自定义缩放动画
          EasyTransition(
            child: Card(
              child: Container(
                height: 150,
                child: Center(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Text('自定义缩放动画'),
                      Icon(Icons.access_alarms)
                    ],
                  ),
                ),
              ),
            ),
            pageToPush: SecondPage(),
            transitionDurationMilliseconds: 400,
            transitionAlignment: Alignment.topLeft,
            curve: Curves.easeIn,
            reverseCurve: Curves.bounceInOut,
          ),
        ],
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        brightness: Brightness.dark,
        centerTitle: true,
        title: Text('第二页'),
      ),
    );
  }
}