PS: Flutter中文網(wǎng)提供的動(dòng)畫(huà)組件真心太多了斜姥，貌似有25種，看著裂開(kāi)了。铸敏。缚忧。太多了，用的時(shí)候反而不好選擇了杈笔，感覺(jué)只要用自己最熟悉的能實(shí)現(xiàn)效果就是最好的闪水。。蒙具。
再?gòu)?fù)雜的動(dòng)畫(huà)也是由簡(jiǎn)單動(dòng)畫(huà)組成的球榆，還是熟悉一下4種基本動(dòng)畫(huà)效果吧。。介陶。
-
動(dòng)畫(huà)核心類簡(jiǎn)介
在Flutter中Widget動(dòng)畫(huà)的核心類有下面這些：
Animation：動(dòng)畫(huà)庫(kù)中的一個(gè)核心類暮刃，它生成指導(dǎo)動(dòng)畫(huà)的值；
CurvedAnimation：將動(dòng)畫(huà)過(guò)程抽象為一個(gè)非線性曲線右钾；
AnimationController：用來(lái)管理管理動(dòng)畫(huà)，常用的方法有forward()：?jiǎn)?dòng)動(dòng)畫(huà)旱爆；reverse({double from}：倒放動(dòng)畫(huà)舀射；reset()：重置動(dòng)畫(huà)，將其設(shè)置到動(dòng)畫(huà)的開(kāi)始位置怀伦；stop({ bool canceled = true })：停止動(dòng)畫(huà)脆烟。
Tween：AnimationController對(duì)象的范圍從0.0到1.0。如果您需要不同的范圍或不同的數(shù)據(jù)類型房待，則可以使用Tween來(lái)配置動(dòng)畫(huà)以生成不同的范圍或數(shù)據(jù)類型的值邢羔。
-
平移動(dòng)畫(huà)：SlideTransition
-
先看下構(gòu)造方法如下圖，必要參數(shù)是 Animation<Offset> position
image.png
-
示例代碼：
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
///
/// 平移動(dòng)畫(huà)
///
class TransAnimationTest extends StatefulWidget {
@override
State<StatefulWidget> createState() => TransAnimationTestState();
}
class TransAnimationTestState extends State<TransAnimationTest>
with TickerProviderStateMixin {
AnimationController controller;
Animation<Offset> animation;
@override
void initState() {
super.initState();
controller =
AnimationController(duration: Duration(milliseconds: 2000), vsync: this)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
controller.forward();
}
@override
Widget build(BuildContext context) {
animation = Tween(
begin: Offset.zero,
end: Offset((MediaQuery.of(context).size.width - 100) / 100, 1))
.animate(controller);
return Scaffold(
appBar: AppBar(title: Text("平移動(dòng)畫(huà)")),
body: Container(
child: SlideTransition(
position: animation,
child: Container(
margin: EdgeInsets.fromLTRB(0, 20, 0, 0),
width: 100,
height: 100,
color: Colors.red,
),
),
),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}
平移動(dòng)畫(huà).gif
-
旋轉(zhuǎn)動(dòng)畫(huà)： RotationTransition
-
構(gòu)造函數(shù)需要：Animation<double> turns
image.png 示例代碼
-
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
///
/// 旋轉(zhuǎn)動(dòng)畫(huà)
///
class RotateAnimationTest extends StatefulWidget {
@override
State<StatefulWidget> createState() => RotateAnimationTestState();
}
class RotateAnimationTestState extends State<RotateAnimationTest>
with TickerProviderStateMixin {
AnimationController controller;
Animation animation;
@override
void initState() {
super.initState();
controller =
AnimationController(duration: Duration(milliseconds: 2000), vsync: this)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
animation = Tween<double>(begin: 0, end: 0.5).animate(controller);
controller.forward();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("旋轉(zhuǎn)動(dòng)畫(huà)")),
body: ClipOval(
child: RotationTransition(
turns: animation,
child: Center(
child: Container(
width: 100,
height: 100,
alignment: Alignment.center,
color: Colors.red,
child: Text("旋轉(zhuǎn)起來(lái)"),
),
)
),
),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}
旋轉(zhuǎn)動(dòng)畫(huà).gif
-
縮放動(dòng)畫(huà)：ScaleTransition
-
構(gòu)造函數(shù)必要參數(shù)： Animation<double> scale
image.png 示例代碼
-
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
///
/// 縮放動(dòng)畫(huà)
///
class ScaleAnimationTest extends StatefulWidget {
@override
State<StatefulWidget> createState() => ScaleAnimationTestState();
}
class ScaleAnimationTestState extends State<ScaleAnimationTest>
with TickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
@override
void initState() {
super.initState();
controller =
AnimationController(duration: Duration(milliseconds: 2000), vsync: this)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
controller.forward();
animation = Tween<double>(begin: 0.5, end: 1).animate(controller);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("縮放動(dòng)畫(huà)")),
body: Container(
child: ScaleTransition(
scale: animation,
child: Center(
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
)
),
),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}
縮放動(dòng)畫(huà).gif
-
漸變動(dòng)畫(huà)：FadeTransition
-
構(gòu)造函數(shù)必要參數(shù)： Animation<double> opacity
image.png 示例代碼
-
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
///
/// 漸變動(dòng)畫(huà)
///
class FadeAnimationTest extends StatefulWidget {
@override
State<StatefulWidget> createState() => FadeAnimationTestState();
}
class FadeAnimationTestState extends State<FadeAnimationTest>
with TickerProviderStateMixin {
AnimationController controller;
Animation animation;
@override
void initState() {
super.initState();
controller =
AnimationController(duration: Duration(milliseconds: 2000), vsync: this)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
animation = Tween<double>(begin: 0.25, end: 1).animate(controller);
controller.forward();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("漸變動(dòng)畫(huà)")),
body: ClipOval(
child: FadeTransition(opacity: animation,
child: Center(
child: Container(
width: 100,
height: 100,
alignment: Alignment.center,
color: Colors.red,
),
)
),
),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}
漸變動(dòng)畫(huà).gif
