Flutter – 路由转换中的动画

路由只是Flutter应用程序中的页面。应用程序经常需要从一个页面移动到另一个页面。但是为了使这些过渡更平滑，可以使用动画。这些动画可用于对 PageRouteBuilder 类的 Animation 对象进行曲线或补间以改变过渡动画。我们将在这里详细讨论它们。

让我们构建一个简单的应用程序来更好地理解这个概念。请按照以下步骤操作：

• 添加 PageRouteBuilder。
• 添加补间。
• 创建一个动画小部件
• 创建一个曲线补间。
• 结合两个补间

让我们详细讨论每个步骤：

添加 PageRouteBuilder：

通过使用 PageRouteBuild 创建两个路由，第一个路由作为“主页”，带有一个按钮“Goto page 2”，第二个路由只有一个名为“Page 2”的空页面，使用以下代码：

Dart

import 'package:flutter/material.dart';
  
main() {
  runApp(MaterialApp(
    home: Page1(),
  ));
}
  
class Page1 extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: RaisedButton(
          child: Text('Go to Page 2'),
          onPressed: () {
            Navigator.of(context).push(_createRoute());
          },
        ),
      ),
    );
  }
}
  
Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return child;
    },
  );
}
  
class Page2 extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text('Page 2'),
      ),
    );
  }
}

添加补间：

您可以使用以下代码构建动画对象的补间：

Dart

transitionsBuilder: (context, animation, secondaryAnimation, child) {
  var begin = Offset(0.0, 1.0);
  var end = Offset.zero;
  var tween = Tween(begin: begin, end: end);
  var offsetAnimation = animation.drive(tween);
  return child;
},

创建一个动画小部件：

一旦动画值发生变化，AnimatedWidget 就具有其状态的属性。您可以创建一个如下所示：

Dart

transitionsBuilder: (context, animation, secondaryAnimation, child) {
  var begin = Offset(0.0, 1.0);
  var end = Offset.zero;
  var tween = Tween(begin: begin, end: end);
  var offsetAnimation = animation.drive(tween);
  
  return SlideTransition(
    position: offsetAnimation,
    child: child,
  );
},

创建曲线补间：

使用以下代码创建 CurveTween：

Dart

var curve = Curves.ease;
  
var curveTween = CurveTween(curve: curve);

结合两个吐温：

使用chain() 方法组合两个补间，如下所示：

Dart

var begin = Offset(0.0, 1.0);
var end = Offset.zero;
var curve = Curves.ease;
  
var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

现在使用 animation.drive() 方法创建组合补间的 Animation 对象，如下所示：

Dart

return SlideTransition(
  position: animation.drive(tween),
  child: child,
);

完整的源代码：

Dart

import 'package:flutter/material.dart';
  
main() {
  runApp(MaterialApp(
    home: Homepage(),
  ));
}
  
class Homepage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title : Text('GeeksForGeeks'),
        backgroundColor: Colors.green,
      ),
  
      body: Center(
        child: RaisedButton(
          child: Text('Go to Page 2'),
          onPressed: () {
            Navigator.of(context).push(_createRoute());
          },
        ),
      ),
    );
  }
}
  
Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(0.0, 1.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,
      );
    },
  );
}
  
class Page2 extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text('Page 2'),
      ),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！