Flutter转场动画 SlideTransition

简单介绍页面跳转的转场动画SlideTransition

(一)实现这个功能，需要5个步骤，如下

a,创建一个PageRouteBuilder b,创建一个Tween c,添加一个AnimatedWidget d,使用一个 CurveTween e,组合这两个Tweens

下面对以上5个步骤做简要说明 a，创建一个PageRouteBuilder 使用PageRouteBuilder构造函数创建Route.PageRouteBuilder,在构建的过程当中，有一个必填参数pageBuilder，目的是获取要跳转的页面，还有一个可选参数transitionDuration，目的是跳转的过程当中实现转场动画，PageRouteBuilder的构造函数结构如下

transitionDuration这个属性，默认的给了一个属性，返回一个Widget，如下图

实现自己的转场动画，就是自己实现transitionsBuilder，来覆盖默认的transitionsBuilder.

b,创建一个Tween,简单理解Tween包含了动画的开始位置和结束位置

定义开始位置 var begin = Offset(0.0, 1.0); 定义结束位置 var end = Offset.zero; 然后初始化Tween，赋值给可选命名参数 var tween = Tween(begin: begin, end: end);

c,添加一个AnimatedWidget

Flutter 中有好多组件继承自AnimatedWidget，这里使用 SlideTransition， 有一个必传参数 position ，类型是Animation，包含了在动画过程中不断变化的值

transitionDuration方法的第二个参数animation，类型是 Animation，结合创建的tween，生成position所需要的类型

d,使用一个 CurveTween，在动画的过程当中，可以按照一定的曲线算法，来完成动画。 我们使用Curves，包含了好多已经定义好的曲线算法。

我们这里使用 var curve = Curves.ease 然后调用Tween.chain方法 作为Tween的parent，作为参数传进去

e,组合这两个Tweens

核心代码如下图

添加效果图 1，从底部弹出第二个页面 2，从右边弹出第二个页面 3，从右下角弹出第二个页面