late AnimationController _controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)…repeat(reverse: true);
late Animation _animation = CurvedAnimation(
parent: _controller,
curve: Curves.elasticOut,
);
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RotationTransition(
turns: _animation,
child: const Padding(
padding: EdgeInsets.all(8.0),
child: FlutterLogo(size: 150.0),
),
),
),
);
}
ScaleTransition示例
late AnimationController _controller = AnimationControll
er(
duration: const Duration(seconds: 2),
vsync: this,
)…repeat(reverse: true);
late Animation _animation = CurvedAnimation(
parent: _controller,
curve: Curves.fastOutSlowIn,
);
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ScaleTransition(
scale: _animation,
child: const Padding(
padding: EdgeInsets.all(8.0),
child: FlutterLogo(size: 150.0),
),
),
),
);
}
SizeTransition示例
late AnimationController _controller = AnimationController(
duration: const Duration(seconds: 3),
vsync: this,
)…repeat();
late Animation _animation = CurvedAnimation(
parent: _controller,
curve: Curves.fastOutSlowIn,
);
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SizeTransition(
sizeFactor: _animation,
axis: Axis.horizontal,
axisAlignment: -1,
child: Center(
child: FlutterLogo(size: 200.0),
),
),
);
}
SlideTransition示例
class _MyStatefulWidgetState extends State with SingleTickerProviderStateMixin {
late AnimationController _controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)…repeat(reverse: true);
late Animation _offsetAnimation = Tween(
begin: Offset.zero,
end: const Offset(1.5, 0.0),
).animate(CurvedAnimation(
parent: _controller,
curve: Curves.elasticIn,
));
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
return SlideTransition(
position: _offsetAnimation,
child: const Padding(
padding: EdgeInsets.all(8.0),
child: FlutterLogo(size: 150.0),
),
);
}
}
不需要外部Animation支持组件示例
AnimatedPadding示例
double padValue = 0.0;
_updatePadding(double value) {
setState(() {
padValue = value;
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedPadding(
padding: EdgeInsets.all(padValue),
duration: const Duration(seconds: 2),
curve: Curves.easeInOut,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height / 5,
color: Colors.blue,
),
),
Text(‘Padding: $padValue’),
ElevatedButton(
child: Text(‘Change padding’),
onPressed: () {
_updatePadding(padValue == 0.0 ? 100.0 : 0.0);
}
),
],
);
}
AnimatedPositioned示例
bool selected = false;
@override
Widget build(BuildContext context) {
return Container(
width: 200,
height: 350,
child: Stack(
children: [
AnimatedPositioned(
width: selected ? 200.0 : 50.0,
height: selected ? 50.0 : 200.0,
top: selected ? 50.0 : 150.0,
duration: Duration(seconds: 2),
curve: Curves.fastOutSlowIn,
child: GestureDetector(
onTap: () {
setState(() {
selected = !selected;
});
},
child: Container(
color: Colors.blue,
child: Center(child: Text(‘Tap me’)),
),
),
),
],
),
);
}
AnimatedOpacity示例
class LogoFade extends StatefulWidget {
@override
createState() => LogoFadeState();
}
class LogoFadeState extends State {
double opacityLevel = 1.0;
void _changeOpacity() {
setState(() => opacityLevel = opacityLevel == 0 ? 1.0 : 0.0);
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedOpacity(
opacity: opacityLevel,
duration: Duration(seconds: 3),
child: FlutterLogo(),
),
ElevatedButton(
child: Text(‘Fade Logo’),
onPressed: _changeOpacity,
),
],
);
}
}
AnimatedAlign示例
bool selected = false;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
selected = !selected;
});
},
child: Center(
child: Container(
width: 250.0,
height: 250.0,
color: Colors.red,
child: AnimatedAlign(
alignment: selected ? Alignment.topRight : Alignment.bottomLeft,
duration: const Duration(seconds: 1),
curve: Curves.fastOutSlowIn,
child: const FlutterLogo(size: 50.0),
),
),
),
);
}
AnimatedContainer示例
bool selected = false;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
selected = !selected;
});
},
child: Center(
child: AnimatedContainer(
width: selected ? 200.0 : 100.0,
height: selected ? 100.0 : 200.0,
color: selected ? Colors.red : Colors.blue,
alignment: selected ? Alignment.center : AlignmentDirectional.topCenter,
duration: Duration(seconds: 2),
curve: Curves.fastOutSlowIn,
child: FlutterLogo(size: 75),
),
),
);
}
AnimatedDefaultTextStyle示例
var duration = Duration(seconds: 5);
TextStyle _style = TextStyle(color: Colors.black);
@override
Widget build(BuildContext context) {
return AnimatedDefaultTextStyle(
: Duration(seconds: 2),
curve: Curves.fastOutSlowIn,
child: FlutterLogo(size: 75),
),
),
);
}
AnimatedDefaultTextStyle示例
var duration = Duration(seconds: 5);
TextStyle _style = TextStyle(color: Colors.black);
@override
Widget build(BuildContext context) {
return AnimatedDefaultTextStyle(
