📜  Flutter – 路由转换中的动画

📅  最后修改于: 2021-09-02 05:32:07             🧑  作者: Mango

路由只是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;
},


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,
  );
},


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


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));


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'),
      ),
    );
  }
}


添加补间:

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

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 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!