本文介绍了在Flutter中实现四种不同的页面转换动画：渐变效果、缩放效果、旋转+缩放效果以及滑动效果。通过CustomRouteJianBian、CustomRouteZoom、CustomRouteRotateZoom和CustomRouteSlide类，详细展示了如何自定义页面路由动画，为应用增加视觉吸引力。
import 'package:flutter/material.dart';
//渐变效果
class CustomRouteJianBian extends PageRouteBuilder{
final Widget widget;
CustomRouteJianBian(this.widget)
:super(
transitionDuration:const Duration(seconds:1),
pageBuilder:(
BuildContext context,
Animation animation1,
Animation animation2){
return widget;
},
transitionsBuilder:(
BuildContext context,
Animation animation1,
Animation animation2,
Widget child){
return FadeTransition(
opacity: Tween(begin:0.0,end :2.0).animate(CurvedAnimation(
parent:animation1,
curve:Curves.fastOutSlowIn
)),
child: child,
);
}
);
}
//缩放效果
class CustomRouteZoom extends PageRouteBuilder{
final Widget widget;
CustomRouteZoom(this.widget)
:super(
transitionDuration:const Duration(seconds:1),
pageBuilder:(
BuildContext context,
Animation animation1,
Animation animation2){
return widget;
},
transitionsBuilder:(
BuildContext context,
Animation animation1,
Animation animation2,
Widget child){
return ScaleTransition(
scale:Tween(begin:0.0,end:1.0).animate(CurvedAnimation(
parent:animation1,
curve: Curves.fastOutSlowIn
)),
child:child
);
}
);
}
//旋转+缩放效果
class CustomRouteRotateZoom extends PageRouteBuilder{
final Widget widget;
CustomRouteRotateZoom(this.widget)
:super(
transitionDuration:const Duration(seconds:1),
pageBuilder:(
BuildContext context,
Animation animation1,
Animation animation2){
return widget;
},
transitionsBuilder:(
BuildContext context,
Animation animation1,
Animation animation2,
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,
)
);
}
);
}
//滑动效果
class CustomRouteSlide extends PageRouteBuilder {
final Widget widget;
CustomRouteSlide(this.widget)
:super(
transitionDuration: const Duration(seconds: 1),
pageBuilder: (BuildContext context,
Animation animation1,
Animation animation2) {
return widget;
},
transitionsBuilder: (BuildContext context,
Animation animation1,
Animation animation2,
Widget child) {
return SlideTransition(
position: Tween(
begin: Offset(-1.0, 0.0),
end: Offset(0.0, 0.0)
)
.animate(CurvedAnimation(
parent: animation1,
curve: Curves.fastOutSlowIn
)),
child: child,
);
}
);
}
扫一扫
645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
