Flutter路由动画插件proste_route_animation的使用

proste_route_animation 是一个用于Flutter应用中的路由动画插件。它提供了多种动画效果，包括淡入淡出、滑动、缩放和旋转等。下面将详细介绍如何使用这个插件。

介绍

通过使用Flutter的过渡小部件来实现页面间的动画切换。以下是插件提供的主要功能：

• 支持多种动画方式：淡入淡出、从左/右/上/下滑动、缩放、旋转等。
• 可以设置进入和退出的时间。
• 支持自定义曲线（Curves）。

使用方法

直接使用 Navigator.push

你可以直接使用 Navigator.push 方法来推送带有动画的路由：

Navigator.push(
  context, 
  ProsteRouteAnimation.fadeRoute(route: DemoPage(), duration: Duration(milliseconds: 300))
);

使用 Navigator.pushNamed

你也可以通过 onGenerateRoute 在 MaterialApp 中设置路由，并使用 Navigator.pushNamed 来导航到指定页面：

MaterialApp(
  onGenerateRoute: (settings) {
    Widget widget;
    switch(settings.name) {
      case '/demo':
        widget = DemoPage();
        break;
      default:
        return null;
    }
    
    return ProsteRouteAnimation.fadeRoute(route: widget, duration: Duration(milliseconds: 300));
  },
);

// 导航按钮
RaisedButton(
  onPressed: () {
    Navigator.pushNamed(
      context,
      '/demo',
      arguments: {'param': 'some value'},
    );
  },
  child: Text('Push'),
);

动画模式

ProsteSlideMode

用于确定 ProsteRouteAnimation.slideRoute() 的动画路径：

• fromLeft: 页面从左向右滑动
• fromRight: 页面从右向左滑动
• fromBottom: 页面从下向上滑动
• fromTop: 页面从上向下滑动

示例代码：

ProsteRouteAnimation.slideRoute(
  route: DemoPage(),
  mode: ProsteSlideMode.fromLeft,
  duration: Duration(milliseconds: 300),
);

ProsteAnimationMode

用于确定构造函数所使用的动画方法：

• fade: 淡入淡出动画
• slideFromLeft: 左滑动画
• slideFromRight: 右滑动画
• slideFromBottom: 上滑动画
• slideFromTop: 下滑动画
• scale: 缩放动画
• rotation: 旋转动画
• size: 大小变化动画

示例代码：

ProsteRouteAnimation(
  builder: (context) => DemoPage(),
  mode: ProsteAnimationMode.fade,
  duration: Duration(milliseconds: 300),
);

API

请注意，使用构造函数方法无法控制路由时间，其他静态函数可以控制进入和退出时间。

示例Demo

下面是一个完整的示例Demo，展示了如何使用 proste_route_animation 插件的不同动画效果。

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:proste_route_animation/proste_route_animation.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateRoute: (settings) {
        final Map arg = Map.from(settings.arguments as Map);
        var route = DemoPage(param: arg['param']);
        switch (arg['type']) {
          case 'ProsteRouteAnimation':
            return ProsteRouteAnimation(
              builder: (context) => route,
              curve: arg['curve'],
              useFade: arg['useFade'],
              axis: arg['axis'],
              alignment: arg['aligment'],
              mode: arg['animationMode'],
            );
          case 'fadeRoute':
            return ProsteRouteAnimation.fadeRoute(
              route: route,
              duration: Duration(milliseconds: arg['duration']),
              reverseDuration: Duration(milliseconds: arg['reverseDuration']),
              curve: arg['curve'],
            );
          // 其他case...
        }
      },
      home: Scaffold(
        appBar: AppBar(title: Text('proste_route_animation')),
        body: MyAppHome(),
      ),
    );
  }
}

class MyAppHome extends StatefulWidget {
  [@override](/user/override)
  _MyAppHomeState createState() => _MyAppHomeState();
}

class _MyAppHomeState extends State<MyAppHome> {
  String _returnMessage = '';
  ProsteSlideMode _slideMode = ProsteSlideMode.fromLeft;
  Alignment _alignment = Alignment.center;
  bool _useFade = false;
  Axis _axis = Axis.vertical;
  int _duration = 300;
  int _reverseDuration = 300;
  Curve _curve = Curves.linear;
  ProsteAnimationMode _animationMode = ProsteAnimationMode.fade;

  String _getRandom() => Random().nextDouble().toString();

  Widget _paddingWidget({required Widget child}) {
    return Padding(padding: EdgeInsets.only(top: 15), child: child);
  }

  // 省略了部分UI组件代码...

  Widget _jumpButton(String title) {
    return RaisedButton(
      onPressed: () {
        String param = _getRandom();
        Navigator.pushNamed(
          context,
          '/demo',
          arguments: {
            'param': param,
            'type': title,
            'slideMode': _slideMode,
            'aligment': _alignment,
            'useFade': _useFade,
            'axis': _axis,
            'duration': _duration,
            'reverseDuration': _reverseDuration,
            'curve': _curve,
            'animationMode': _animationMode,
          },
        ).then((value) {
          setState(() {
            _returnMessage = value.toString();
          });
        });
      },
      child: Text(title),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListView(
      children: [
        _paddingWidget(child: Text('returnMessage: $_returnMessage', textAlign: TextAlign.center)),
        // 省略了部分UI组件代码...
        Wrap(
          alignment: WrapAlignment.spaceEvenly,
          children: [
            _jumpButton('fadeRoute'),
            _jumpButton('slideRoute'),
            _jumpButton('scaleRoute'),
            _jumpButton('rotationRoute'),
            _jumpButton('sizeRoute'),
            _jumpButton('ProsteRouteAnimation'),
          ],
        ),
      ],
    );
  }
}

class DemoPage extends StatelessWidget {
  final String param;

  const DemoPage({required this.param});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('demo')),
      body: Column(
        children: [
          Text('param is $param'),
          RaisedButton(
            onPressed: () {
              Random random = Random();
              Navigator.pop<int>(context, random.nextInt(100));
            },
            child: Text('Back'),
          )
        ],
      ),
    );
  }
}