Flutter 中的路由动画库：实现自定义页面切换效果

Flutter 中的路由动画库：实现自定义页面切换效果

5 回复

可以使用 Flutter 自带的 PageRouteBuilder 来创建自定义路由动画。

更多关于Flutter 中的路由动画库：实现自定义页面切换效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以使用PageRouteBuilder或第三方库如flutter_sequence_animation来实现自定义路由动画，增强页面切换效果。

在 Flutter 中，你可以使用 PageRouteBuilder 来实现自定义路由动画。通过 transitionsBuilder 参数，你可以定义页面切换的动画效果。例如：

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => NewPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  ),
);

此外，你还可以使用第三方库如 flutter_page_transition 或 animated_page_reveal 来简化复杂动画的实现。

可以使用PageRouteBuilder类来自定义路由动画。

在 Flutter 中，你可以使用 PageRouteBuilder 或 Hero 动画来实现自定义页面切换效果。PageRouteBuilder 提供了灵活的方式来定义页面过渡动画，而 Hero 动画则适用于在页面之间共享元素过渡。

使用 PageRouteBuilder 实现自定义路由动画

以下是一个简单的示例，展示了如何使用 PageRouteBuilder 实现自定义页面切换效果：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(
              PageRouteBuilder(
                pageBuilder: (context, animation, secondaryAnimation) => SecondScreen(),
                transitionsBuilder: (context, animation, secondaryAnimation, child) {
                  var begin = Offset(1.0, 0.0);
                  var end = Offset.zero;
                  var curve = Curves.ease;

                  var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

                  return SlideTransition(
                    position: animation.drive(tween),
                    child: child,
                  );
                },
              ),
            );
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text('Go back'),
        ),
      ),
    );
  }
}

使用 Hero 动画实现共享元素过渡

Hero 动画适用于在页面之间共享元素的过渡效果。以下是一个简单的示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      body: Center(
        child: Hero(
          tag: 'heroTag',
          child: Icon(Icons.flight, size: 100.0),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => SecondScreen(),
            ),
          );
        },
        child: Icon(Icons.navigate_next),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: Hero(
          tag: 'heroTag',
          child: Icon(Icons.flight, size: 100.0),
        ),
      ),
    );
  }
}

总结

  • PageRouteBuilder 提供了灵活的方式来定义自定义页面过渡动画。
  • Hero 动画适用于在页面之间共享元素的过渡效果。

通过结合这些工具，你可以在 Flutter 中实现各种自定义页面切换效果。

回到顶部