【flutter】动画
程序员文章站
2024-01-14 17:40:16
...
1、跳转时的方法
Navigator.of(context).push(CustomRoute(SecondScreen(name:name), "ScaleTransition"));
//获取返回值
Navigator.of(context).push(CustomRoute(SecondScreen(name:name), "SlideTransition")).then( (result){
b=result;
});
b = await Navigator.push(
context,
MaterialPageRoute(
builder:(context)=>SecondScreen(name:name)//新页面
)
);
2、封装的动画
import 'package:flutter/material.dart';
class CustomRoute extends PageRouteBuilder{
final Widget widget;
final String type;
CustomRoute(this.widget,this.type)
:super(
transitionDuration:const Duration(milliseconds:500),//动画时间
pageBuilder:(
BuildContext context,
Animation<double> animation1,
Animation<double> animation2){
return widget;
},
transitionsBuilder:(
BuildContext context,
Animation<double> animation1,
Animation<double> animation2,
Widget child){
switch (type) {
case "FadeTransition"://淡入淡出
return FadeTransitionNew(animation1,child);
case "ScaleTransition"://缩放路由动画
return ScaleTransitionNew(animation1,child);
case "RotationTransition"://旋转+缩放路由动画
return RotationTransitionNew(animation1,child);
case "SlideTransition"://左右滑动路由动画
return SlideTransitionNew(animation1,child);
}
}
);
/**
* 淡入淡出
*/
static FadeTransitionNew(Animation<double> animation1,Widget child){
return FadeTransition(
opacity: Tween(begin:0.0,end :1.0).animate(CurvedAnimation(
parent:animation1,
curve:Curves.fastOutSlowIn
)),
child: child,
);
}
/**
* 缩放路由动画
*/
static ScaleTransitionNew(Animation<double> animation1,Widget child){
return ScaleTransition(
scale:Tween(begin:0.0,end:1.0).animate(CurvedAnimation(
parent:animation1,
curve: Curves.fastOutSlowIn
)),
child:child
);
}
/**
* 旋转+缩放路由动画
*/
static RotationTransitionNew(Animation<double> animation1,Widget child){
return RotationTransition(
turns:Tween(begin:0.0,end:1.0)
.animate(CurvedAnimation(
parent: animation1,
curve: Curves.fastOutSlowIn
)),
child:ScaleTransition(
scale:Tween(begin: 0.0,end:1.0)
.animate(CurvedAnimation(
parent: animation1,
curve:Curves.fastOutSlowIn
)),
child: child,
)
);
}
/**
* 左右滑动路由动画
*/
static SlideTransitionNew(Animation<double> animation1,Widget child){
// 幻灯片路由动画
return SlideTransition(
position: Tween<Offset>(
begin: Offset(-1.0, 0.0),
end:Offset(0.0, 0.0)
)
.animate(CurvedAnimation(
parent: animation1,
curve: Curves.fastOutSlowIn
)),
child: child,
);
}
}