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

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

这个包用于页面过渡动画。通过这个包,你可以在你的应用中实现平滑的页面过渡效果。请查看下面的视频!

使用

pubspec.yaml 文件中添加 animation_page_transition 依赖。

然后在实现文件中导入该包:

import 'package:animated_page_transition/animated_page_transition.dart';

你可以非常容易地实现动画页面过渡。

首先,将按钮包裹在 [PageTransitionButton] 小部件中,示例代码如下:

要使用 [PageTransitionButton],你需要将 [TickerProviderStateMixin] 添加到你的小部件中。

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

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

class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PageTransitionButton(
          vsync: this,
          child: Container(
            height: 120,
            width: 120,
            decoration: BoxDecoration(
              color: const Color(0xFFFF9735),
              borderRadius: BorderRadius.circular(10),
            ),
          ),
          nextPage: const SecondScreen(),
        ),
      ),
    );
  }
}

然后,在第二个屏幕的 Scaffold 上包裹 [PageTransitionReceiver] 小部件,如下所示:

class SecondScreen extends StatelessWidget {
  const SecondScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PageTransitionReceiver(
      scaffold: const Scaffold(
        backgroundColor: Color(0xFFFF9735),
      ),
    );
  }
}

现在你已经准备好了!享受编码的乐趣吧!

完整示例Demo

以下是完整的示例代码:

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Animated Page Transition',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

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

class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PageTransitionButton(
          vsync: this,
          child: Container(
            height: 120,
            width: 120,
            decoration: BoxDecoration(
              color: const Color(0xFFFF9735),
              borderRadius: BorderRadius.circular(10),
            ),
          ),
          nextPage: const SecondScreen(),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PageTransitionReceiver(
      scaffold: const Scaffold(
        backgroundColor: Color(0xFFFF9735),
      ),
    );
  }
}

更多关于Flutter页面过渡动画插件animated_page_transition的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter页面过渡动画插件animated_page_transition的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter中使用animated_page_transition插件来实现页面过渡动画的示例代码。

首先,确保你已经在pubspec.yaml文件中添加了animated_page_transition依赖:

dependencies:
  flutter:
    sdk: flutter
  animated_page_transition: ^2.0.1  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

接下来,在你的Flutter项目中,你可以创建一个简单的应用来演示如何使用animated_page_transition。以下是一个完整的示例代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Page Transition Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Page Transition Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              PageTransition(
                type: PageTransitionType.fade, // 你可以尝试其他类型,比如slide, scale, rightToLeft, etc.
                child: SecondScreen(),
              ),
            );
          },
          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.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

// 自定义PageTransition包装器
class PageTransition extends StatelessWidget {
  final PageTransitionType type;
  final Widget child;

  const PageTransition({Key key, @required this.type, @required this.child})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AnimatedPageTransition(
      child: child,
      duration: Duration(milliseconds: 500), // 动画持续时间
      type: type,
      curve: Curves.easeInOut, // 动画曲线
    );
  }
}

enum PageTransitionType {
  fade,
  slide,
  scale,
  rightToLeft,
  leftToRight,
  topToBottom,
  bottomToTop,
}

extension PageTransitionTypeExtension on PageTransitionType {
  PageTransitionType get animationType {
    switch (this) {
      case PageTransitionType.fade:
        return PageTransitionType.fade;
      case PageTransitionType.slide:
        return PageTransitionType.slide;
      case PageTransitionType.scale:
        return PageTransitionType.scale;
      case PageTransitionType.rightToLeft:
        return PageTransitionType.rightToLeft;
      case PageTransitionType.leftToRight:
        return PageTransitionType.leftToRight;
      case PageTransitionType.topToBottom:
        return PageTransitionType.topToBottom;
      case PageTransitionType.bottomToTop:
        return PageTransitionType.bottomToTop;
      default:
        return PageTransitionType.fade;
    }
  }

  AnimatedPageTransitionType toAnimatedPageTransitionType() {
    switch (this) {
      case PageTransitionType.fade:
        return AnimatedPageTransitionType.fade;
      case PageTransitionType.slide:
        return AnimatedPageTransitionType.slide;
      case PageTransitionType.scale:
        return AnimatedPageTransitionType.scale;
      case PageTransitionType.rightToLeft:
        return AnimatedPageTransitionType.rightToLeft;
      case PageTransitionType.leftToRight:
        return AnimatedPageTransitionType.leftToRight;
      case PageTransitionType.topToBottom:
        return AnimatedPageTransitionType.topToBottom;
      case PageTransitionType.bottomToTop:
        return AnimatedPageTransitionType.bottomToTop;
      default:
        return AnimatedPageTransitionType.fade;
    }
  }
}

注意

  1. AnimatedPageTransition插件的type参数接受的是AnimatedPageTransitionType枚举类型,而不是自定义的PageTransitionType。为了简单起见,上面的示例代码中包含了一个将自定义枚举转换为AnimatedPageTransitionType的扩展方法,但在实际使用中,你可以直接传递AnimatedPageTransitionType枚举值。

  2. 在实际代码中,你可能不需要自定义的PageTransition包装器和PageTransitionType枚举,直接传递AnimatedPageTransitionType枚举值给AnimatedPageTransitiontype参数即可。

为了简化,你可以直接使用如下方式:

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (_, __, ___) => SecondScreen(),
    transitionsBuilder: (_, Animation<double> animation, __, Widget child) {
      return AnimatedPageTransition(
        child: child,
        duration: Duration(milliseconds: 500),
        type: AnimatedPageTransitionType.fade, // 或其他类型
        curve: Curves.easeInOut,
      );
    },
  ),
);

这样你就可以轻松地在Flutter应用中实现页面过渡动画了。

回到顶部