Skip to content

Commit 33683ea

Browse files
richuffrichuff
authored
docs:update /docs/flutter.md (#830)
* doc:update docs/flutter.md * docs:update docs/flutter.md * docs:update docs/flutter.md
1 parent 77b2c7a commit 33683ea

File tree

1 file changed

+221
-4
lines changed

1 file changed

+221
-4
lines changed

‎docs/flutter.md‎

Lines changed: 221 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -892,7 +892,11 @@ PageView.builder(
892892
),
893893
),
894894
```
895-
### flutter动画组件
895+
## flutter动画组件
896+
897+
### 1.隐式动画
898+
899+
> 在动画组件内，直接配置curve和duration属性
896900
897901
#### AnimatedContainer
898902
> 使用AnimatedContainer组件，配置curve曲线过渡和duration过渡时间
@@ -938,7 +942,7 @@ class _HomeState extends State<HomeState>{
938942
```
939943

940944
#### AnimatedPadding
941-
> 通过配置padding值的改变，引起组件的动画效果,同样支持curve和duration的配置
945+
> 通过配置padding值的改变，引起组件的移动动画效果,同样支持curve和duration的配置
942946
943947
```dart
944948
class _HomeState extends State<HomeState>{
@@ -975,7 +979,7 @@ class _HomeState extends State<HomeState>{
975979
```
976980

977981
#### AnimatedAlign
978-
> 通过配置alignment值的改变，引起组件的动画效果,同样支持curve和duration的配置
982+
> 通过配置alignment值的改变，引起组件的对齐动画效果,同样支持curve和duration的配置
979983
980984
```dart
981985
class _HomeState extends State<HomeState>{
@@ -1013,7 +1017,7 @@ class _HomeState extends State<HomeState>{
10131017

10141018
#### AnimatedOpacity
10151019

1016-
>通过配置opacity值的改变，引起组件的动画效果,同样支持curve和duration的配置
1020+
>通过配置opacity值的改变，引起组件的透明度变化动画效果,同样支持curve和duration的配置
10171021
10181022
```dart
10191023
class _HomeState extends State<HomeState>{
@@ -1048,6 +1052,219 @@ class _HomeState extends State<HomeState>{
10481052
}
10491053
}
10501054
```
1055+
#### AnimatedPositioned
1056+
1057+
> 通过配置top,left,right,bottom值的改变，引起组件的距离变化动画效果,同样支持curve和duration的配置
1058+
1059+
```dart
1060+
class _HomeState extends State<HomeState>{
1061+
bool press = false;
1062+
@override
1063+
Widget build(BuildContext context) {
1064+
return MaterialApp(
1065+
home: Scaffold(
1066+
floatingActionButton:FloatingActionButton(onPressed: (){
1067+
setState(() {
1068+
press = true;
1069+
});
1070+
}
1071+
,child: const Icon(Icons.add),) ,
1072+
appBar: AppBar(
1073+
title: const Text("测试"),
1074+
),
1075+
body:Stack(
1076+
children: [
1077+
AnimatedPositioned(
1078+
top: press ? 0 : 100,
1079+
left:press ? 0 : 100,
1080+
curve: Curves.ease, //曲线
1081+
duration: const Duration(seconds: 1), //延时
1082+
child: Container(
1083+
width: 200,
1084+
height: 200,
1085+
color:Colors.yellow,
1086+
),
1087+
),
1088+
],
1089+
)
1090+
)
1091+
);
1092+
}
1093+
}
1094+
```
1095+
1096+
### 2.显示动画
1097+
1098+
> 使用显示动画,定义AnimationController,在组件上with SingleTickerProviderStateMixin
1099+
1100+
#### RotationTransition
1101+
1102+
>RotationTransition实现旋转动画,turns为AnimationController,可以在initState初始化的时候设置vsync,duration来让程序和手机的刷新频率统一,使用..联级操作调用repeat函数让动画重复运动
1103+
1104+
```dart
1105+
class _Boxed extends State<Boxed> with SingleTickerProviderStateMixin{
1106+
late AnimationController _controller;
1107+
1108+
@override
1109+
void initState() {
1110+
super.initState();
1111+
_controller = AnimationController(
1112+
vsync: this,
1113+
duration: const Duration(seconds: 1)
1114+
)..repeat(); //让程序和手机的刷新频率统一
1115+
}
1116+
1117+
@override
1118+
Widget build(BuildContext context) {
1119+
return SizedBox(
1120+
height: 100,
1121+
width: 100,
1122+
child: RotationTransition(turns: _controller,
1123+
child: const FlutterLogo(size: 60),
1124+
)
1125+
);
1126+
}
1127+
}
1128+
```
1129+
1130+
#### AnimationController
1131+
1132+
> controller的播放方式
1133+
>
1134+
> repeat 重复
1135+
>
1136+
> forward 播放一次
1137+
>
1138+
> reverse 倒序播放
1139+
>
1140+
> stop 停止
1141+
>
1142+
> reset 重置
1143+
1144+
```dart
1145+
class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
1146+
1147+
late AnimationController _controller;
1148+
1149+
@override
1150+
void initState() {
1151+
super.initState();
1152+
_controller =
1153+
AnimationController(vsync: this, duration: const Duration(seconds: 1));//让程序和手机的刷新频率统一
1154+
}
1155+
1156+
@override
1157+
Widget build(BuildContext context) {
1158+
return MaterialApp(
1159+
home: Scaffold(
1160+
floatingActionButton:FloatingActionButton(onPressed: (){
1161+
_controller.repeat(); //重复播放
1162+
},child:const Icon(Icons.add),) ,
1163+
appBar: AppBar(
1164+
title: const Text("测试"),
1165+
),
1166+
body: Center(
1167+
child: Column(
1168+
children: [RotationTransition(
1169+
turns: _controller,
1170+
child: const FlutterLogo(size: 60),
1171+
),
1172+
ElevatedButton(onPressed: (){
1173+
_controller.forward(); //播放一次
1174+
}, child:const Icon(Icons.refresh)),
1175+
ElevatedButton(onPressed: (){
1176+
_controller.reverse(); //倒序播放
1177+
}, child:const Icon(Icons.refresh)),
1178+
ElevatedButton(onPressed: (){
1179+
_controller.stop(); //停止
1180+
}, child:const Icon(Icons.refresh)),
1181+
ElevatedButton(onPressed: (){
1182+
_controller.reset(); //重置
1183+
}, child:const Icon(Icons.refresh)),
1184+
]
1185+
)
1186+
)
1187+
)
1188+
);
1189+
}
1190+
}
1191+
```
1192+
1193+
#### FadeTransition
1194+
1195+
>RotationTransition实现透明度变化动画,opacity为AnimationController,可以在initState初始化的时候设置vsync,duration来让程序和手机的刷新频率统一,同时controller为0-1的值,因此opacity会发生从透明到实体的过程,如果要实现实体逐渐到透明可以使用reverse()倒序播放
1196+
1197+
```dart
1198+
class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
1199+
1200+
late AnimationController _controller;
1201+
1202+
@override
1203+
void initState() {
1204+
super.initState();
1205+
_controller =
1206+
AnimationController(vsync: this, duration: const Duration(seconds: 1));//让程序和手机的刷新频率统一
1207+
}
1208+
1209+
@override
1210+
Widget build(BuildContext context) {
1211+
return MaterialApp(
1212+
home: Scaffold(
1213+
floatingActionButton:FloatingActionButton(onPressed: (){
1214+
_controller.repeat(); //重复播放
1215+
},child:const Icon(Icons.add),) ,
1216+
appBar: AppBar(
1217+
title: const Text("测试"),
1218+
),
1219+
body: Center(
1220+
child: FadeTransition(opacity: _controller,
1221+
child: const FlutterLogo(size: 60,),
1222+
)
1223+
)
1224+
)
1225+
);
1226+
}
1227+
}
1228+
```
1229+
1230+
> 也可以通过lowerBound和upperBound来配置controller的最低和最高值
1231+
1232+
#### ScaleTransition
1233+
1234+
> ScaleTransition实现放大缩小动画,scale为AnimationController,可以在initState初始化的时候设置vsync,duration来让程序和手机的刷新频率统一,同时controller为0-1的值,因此scale会发生从小到大的过程,如果要实现大逐渐到小可以使用reverse()倒序播放
1235+
1236+
```dart
1237+
class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
1238+
1239+
late AnimationController _controller;
1240+
1241+
@override
1242+
void initState() {
1243+
super.initState();
1244+
_controller =
1245+
AnimationController(vsync: this, duration: const Duration(seconds: 1));//让程序和手机的刷新频率统一
1246+
}
1247+
1248+
@override
1249+
Widget build(BuildContext context) {
1250+
return MaterialApp(
1251+
home: Scaffold(
1252+
floatingActionButton:FloatingActionButton(onPressed: (){
1253+
_controller.repeat(); //重复播放
1254+
},child:const Icon(Icons.add),) ,
1255+
appBar: AppBar(
1256+
title: const Text("测试"),
1257+
),
1258+
body: Center(
1259+
child: ScaleTransition(scale: _controller,
1260+
child: const FlutterLogo(size: 60,),
1261+
)
1262+
)
1263+
)
1264+
);
1265+
}
1266+
}
1267+
```
10511268

10521269
另见
10531270
---

0 commit comments

Comments
 (0)