一、AnimatedContainer
带有动画效果的Container,属性与Container类似,只不过多了
curve
动画曲线的设置。
示例:
import 'package:flutter/material.dart';
class AnimatedContainerRoute extends StatefulWidget{
@override
_AnimatedContainerRouteState createState() {
// TODO: implement createState
return _AnimatedContainerRouteState();
}
}
class _AnimatedContainerRouteState extends State<AnimatedContainerRoute>{
Size size = Size(0,0);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('AnimatedContainerDemo'),
),
body: Center(
child:Column(
children: <Widget>[
AnimatedContainer(
duration: Duration(seconds: 2),
curve: Curves.easeInOutQuart,
height: size.height,
width: size.width,
color: Colors.blue,
margin: EdgeInsets.all(30),
alignment: Alignment.center,
child: Text('AnimatedContainer', style: TextStyle(color: Colors.white),),
),
RaisedButton(
child: Text('start animate'),
onPressed: (){
setState(() {
size = size.width == 0 ? Size(300, 200) : Size(0,0);
});
},
)
],
),
)
);
}
}
二、AnimatedCrossFade
在两个widget之间切换
import 'package:flutter/material.dart';
class AnimatedCrossFadeRoute extends StatefulWidget {
@override
_AnimatedCrossFadeRouteState createState() {
// TODO: implement createState
return _AnimatedCrossFadeRouteState();
}
}
class _AnimatedCrossFadeRouteState extends State<AnimatedCrossFadeRoute> {
bool _isFirst = true;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('AnimatedCrossFade'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
constraints: BoxConstraints.tight(Size(400, 500)),
alignment: Alignment.center,
child: AnimatedCrossFade(
sizeCurve: Curves.easeInOut,
alignment: Alignment.topLeft,
firstChild: Container(
constraints: BoxConstraints.tight(Size(100, 100)),
color: Colors.red,
),
secondChild: Container(
constraints: BoxConstraints.tight(Size(300, 300)),
color: Colors.blue),
crossFadeState: _isFirst
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
duration: Duration(seconds: 1),
layoutBuilder: (Widget topChild, Key topChildKey, Widget bottomChild, Key bottomChildKey){
return Stack(
fit: StackFit.loose,
alignment: Alignment.center,
children: <Widget>[
Positioned(
key: bottomChildKey,
child: bottomChild,
),
Positioned(
key: topChildKey,
child: topChild,
)
],
);
},
),
),
RaisedButton(
child: Text('change Container'),
onPressed: () {
setState(() {
_isFirst = !_isFirst;
});
},
)
],
),
));
}
}
三、DecoratedBoxTransition
带有动画效果的DecoratedBox。
import 'package:flutter/material.dart';
class DecoratedBoxTransitionRoute extends StatefulWidget {
@override
_DecoratedBoxTransitionRouteState createState() {
// TODO: implement createState
return _DecoratedBoxTransitionRouteState();
}
}
class _DecoratedBoxTransitionRouteState
extends State<DecoratedBoxTransitionRoute>
with SingleTickerProviderStateMixin {
AnimationController _controller;
bool _animated = false;
@override
void initState() {
// TODO: implement initState
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 1));
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('DecoratedBoxTransition'),
),
body: Center(
child: Column(
children: <Widget>[
SizedBox(height: 30.0,),
DecoratedBoxTransition(
decoration: DecorationTween(
begin: BoxDecoration(color: Colors.red),
end: BoxDecoration(color: Colors.blue, borderRadius: BorderRadius.circular(300.0)))
.animate(_controller),
child: Container(
constraints: BoxConstraints.tight(Size(300, 300)),
),
),
SizedBox(height:30.0),
RaisedButton(
child: Text('start animate'),
onPressed: () {
_animated ? _controller.reverse() : _controller.forward();
setState(() {
_animated = !_animated;
});
},
)
],
)),
);
}
}
四、FadeTransition
渐隐渐现、透明度动画。
import 'package:flutter/material.dart';
class FadeTransitionRoute extends StatefulWidget{
@override
_FadeTransitionRouteState createState() {
// TODO: implement createState
return _FadeTransitionRouteState();
}
}
class _FadeTransitionRouteState extends State<FadeTransitionRoute> with SingleTickerProviderStateMixin{
AnimationController _controller;
bool _animate = false;
@override
void initState() {
// TODO: implement initState
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('FadeTransition'),
),
body: Center(
child: Column(
children: <Widget>[
FadeTransition(
opacity: Tween(begin: 1.0, end: 0.0).animate(_controller),
child: Container(
constraints: BoxConstraints.tight(Size(300,300)),
color: Colors.red,
margin: EdgeInsets.symmetric(vertical: 30.0),
),
),
RaisedButton(
child: Text('start animate'),
onPressed: () {
_animate ? _controller.reverse() : _controller.forward();
setState(() {
_animate = !_animate;
});
},
)
],
),
),
);
}
}
五、PositionedTransition
Position的动画版。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class PositionedTransitionRoute extends StatefulWidget {
@override
_PositionedTransitionRouteState createState() {
// TODO: implement createState
return _PositionedTransitionRouteState();
}
}
class _PositionedTransitionRouteState extends State<PositionedTransitionRoute>
with SingleTickerProviderStateMixin {
AnimationController _controller;
bool _animate = false;
@override
void initState() {
// TODO: implement initState
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 1));
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('PositionTranstion'),
),
body: Stack(
children: <Widget>[
PositionedTransition(
rect: RelativeRectTween(
begin: RelativeRect.fromLTRB(200.0, 200.0, 200.0, 200.0),
end: RelativeRect.fromLTRB(100.0, 100.0, 100.0, 100.0))
.animate(_controller),
child: Container(
height: 100,
width: 100,
color: Colors.red,
),
),
Positioned(
bottom: 20.0,
left: 0,
right: 0,
child: Center(
child: RaisedButton(
child: Text('start animate'),
onPressed: () {
_animate ? _controller.reverse() : _controller.forward();
setState(() {
_animate = !_animate;
});
},
),
)
),
],
),
);
}
}
六、RotationTransition
旋转动画。其中1.0表示360°。
import 'package:flutter/material.dart';
class RotationTransitionRoute extends StatefulWidget{
@override
_RotationTransitionRouteState createState() {
// TODO: implement createState
return _RotationTransitionRouteState();
}
}
class _RotationTransitionRouteState extends State<RotationTransitionRoute> with SingleTickerProviderStateMixin{
AnimationController _controller;
bool _animate = false;
@override
void initState() {
// TODO: implement initState
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('RatationTransition'),
),
body: Center(
child: Column(
children: <Widget>[
RotationTransition(
turns: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(curve: Curves.easeIn, parent: _controller)),
child: Container(
height: 100,
width: 100,
color: Colors.red,
margin: EdgeInsets.all(100.0),
),
),
RaisedButton(
child: Text('start animate'),
onPressed: () {
_animate ? _controller.reverse() : _controller.forward();
setState(() {
_animate = !_animate;
});
},
)
],
),
),
);
}
}
七、ScaleTransition
缩放动画。
import 'package:flutter/material.dart';
class ScaleTransitionRoute extends StatefulWidget{
@override
_ScaleTransitionRouteState createState() {
// TODO: implement createState
return _ScaleTransitionRouteState();
}
}
class _ScaleTransitionRouteState extends State<ScaleTransitionRoute> with SingleTickerProviderStateMixin{
AnimationController _controller;
bool _animate = false;
@override
void initState() {
// TODO: implement initState
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('ScaleTransition'),
),
body: Center(
child: Column(
children: <Widget>[
ScaleTransition(
scale: Tween(begin: 1.0, end: 0.0).animate(CurvedAnimation(curve: Curves.bounceIn, parent: _controller)),
child: Container(
constraints: BoxConstraints.tight(Size(300, 300)),
color: Colors.red,
margin: EdgeInsets.symmetric(vertical: 30.0),
),
),
RaisedButton(
child: Text('start animate'),
onPressed: () {
_animate ? _controller.reverse() : _controller.forward();
setState(() {
_animate = !_animate;
});
},
)
],
),
)
);
}
}
八、SlideTransition
偏移动画,偏移量为相对于本身的百分比。
import 'package:flutter/material.dart';
class SlideTransitionRoute extends StatefulWidget{
@override
_SlideTransitionRouteState createState() {
// TODO: implement createState
return _SlideTransitionRouteState();
}
}
class _SlideTransitionRouteState extends State<SlideTransitionRoute> with SingleTickerProviderStateMixin{
AnimationController _controller;
bool _animate = false;
@override
void initState() {
// TODO: implement initState
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('SlideTransition'),
),
body: Center(
child: Column(
children: <Widget>[
Container(
height: 500,
width: double.infinity,
alignment: Alignment.center,
child: SlideTransition(
position: Tween(begin: Offset(0, 0),end: Offset(1.5,0)).animate(CurvedAnimation(curve: Curves.easeInOut, parent: _controller)),
child: Container(
constraints: BoxConstraints.tight(Size(300,300)),
color: Colors.red,
),
),
),
RaisedButton(
child: Text('start animate'),
onPressed: () {
_animate ? _controller.reverse() : _controller.forward();
setState(() {
_animate = !_animate;
});
},
)
],
),
),
);
}
}
九、AlignTransition
对齐方式动画。
import 'package:flutter/material.dart';
class AlignTransitionRoute extends StatefulWidget{
@override
_AlignTransitionRouteState createState() {
// TODO: implement createState
return _AlignTransitionRouteState();
}
}
class _AlignTransitionRouteState extends State<AlignTransitionRoute> with SingleTickerProviderStateMixin{
AnimationController _controller;
bool _animate = false;
@override
void initState() {
// TODO: implement initState
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('AlignTransition'),
),
body: Center(
child: Column(
children: <Widget>[
Container(
height: 500,
color: Colors.blue,
child: AlignTransition(
alignment: Tween(begin: Alignment(-1, -1), end: Alignment(1,1)).animate(CurvedAnimation(curve: Curves.easeInOut, parent: _controller)),
child: Container(
constraints: BoxConstraints.tight(Size(200,200)),
color: Colors.red,
),
),
),
RaisedButton(
child: Text('start animate'),
onPressed: () {
_animate ? _controller.reverse() : _controller.forward();
setState(() {
_animate = !_animate;
});
},
)
],
),
),
);
}
}
十、SizeTransition
尺寸缩放。
import 'package:flutter/material.dart';
class SizeTransitionRoute extends StatefulWidget{
@override
_SizeTransitionRouteState createState() {
// TODO: implement createState
return _SizeTransitionRouteState();
}
}
class _SizeTransitionRouteState extends State<SizeTransitionRoute> with SingleTickerProviderStateMixin{
AnimationController _controller;
bool _animate = false;
@override
void initState() {
// TODO: implement initState
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('SizeTransition'),
),
body: Center(
child: Column(
children: <Widget>[
Container(
height: 500,
child: SizeTransition(
axis: Axis.horizontal,
sizeFactor: Tween(begin: 1.0, end: 0.5).animate(CurvedAnimation(curve: Curves.easeInOut, parent: _controller)),
child: Container(
constraints: BoxConstraints.tight(Size(300, 300)),
color: Colors.red,
),
),
),
RaisedButton(
child: Text('start aniamte'),
onPressed: () {
_animate ? _controller.reverse() : _controller.forward();
setState(() {
_animate = !_animate;
});
},
)
],
),
),
);
}
}
十一、AnimatedDefaultTextStyle
文本样式切换动画。
import 'package:flutter/material.dart';
class AnimatedDefaultTextStyleRoute extends StatefulWidget{
@override
_AnimatedDefaultTextStyleRouteState createState() {
// TODO: implement createState
return _AnimatedDefaultTextStyleRouteState();
}
}
class _AnimatedDefaultTextStyleRouteState extends State<AnimatedDefaultTextStyleRoute> {
double _fontSize = 10.0;
Color _color = Colors.red;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('AnimatedDefaultTextStyle'),
),
body: Center(
child: Column(
children: <Widget>[
AnimatedDefaultTextStyle(
child: Container(
constraints: BoxConstraints.tight(Size(300,300)),
alignment: Alignment.center,
child: Text(
'AnimatedDefaultTextStyle'
),
),
style: TextStyle(
fontSize: _fontSize,
color: _color
),
duration: Duration(seconds: 1),
curve: Curves.easeIn,
),
FlatButton(
child: Text('start animate'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {
setState(() {
_fontSize = (_fontSize == 20.0 ? 10.0 : 20.0);
_color = (_color == Colors.blue ? Colors.red : Colors.blue);
});
},
)
],
),
),
);
}
}
十二、AnimatedOpacity
Opacity的动画版本,在给定的透明度变化时,自动地在给定的一段时间内改变孩子的Opacity。
import 'package:flutter/material.dart';
class AnimatedOpacityRoute extends StatefulWidget{
@override
_AnimatedOpacityRouteState createState() {
// TODO: implement createState
return _AnimatedOpacityRouteState();
}
}
class _AnimatedOpacityRouteState extends State<AnimatedOpacityRoute> {
double _opacity = 1.0;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('AnimatedOpacity'),
),
body: Center(
child: Column(
children: <Widget>[
AnimatedOpacity(
child: Container(
constraints: BoxConstraints.tight(Size(300,300)),
color: Colors.red,
margin: EdgeInsets.symmetric(vertical: 30.0),
),
opacity: _opacity,
curve: Curves.easeOutSine,
duration: Duration(seconds: 1),
),
RaisedButton(
child: Text('start animate'),
onPressed: () {
setState(() {
_opacity = (_opacity == 1.0 ? 0.0 : 1.0);
});
},
)
],
),
)
);
}
}
十三、AnimatedPhysicalModel
PhysicalModel的动画版。
import 'package:flutter/material.dart';
class AnimatedPhysicalModelRoute extends StatefulWidget{
@override
_AnimatedPhysicalModelRouteState createState() {
// TODO: implement createState
return _AnimatedPhysicalModelRouteState();
}
}
class _AnimatedPhysicalModelRouteState extends State<AnimatedPhysicalModelRoute>{
BorderRadius _radius = BorderRadius.circular(10.0);
Color _color = Colors.red;
bool _animate = false;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('PhysicalModel'),
),
body: Center(
child: Column(
children: <Widget>[
AnimatedPhysicalModel(child:
Container(
constraints: BoxConstraints.tight(Size(300, 300)),
),
shape: BoxShape.rectangle,
borderRadius: _radius,
elevation: 4.0,
color: _color,
shadowColor: _color,
duration: Duration(seconds: 1)
),
RaisedButton(
child: Text('start animate'),
onPressed: (){
setState(() {
_animate = !_animate;
_radius = (_animate ? BorderRadius.circular(300.0) : BorderRadius.circular(10.0));
_color = (_animate ? Colors.blue : Colors.red);
});
},
)
],
),
),
);
}
}
十四、AnimatedPositioned
Positioned的动画版,每当给定位置的变化,自动在给定的时间内转换孩子的位置。
import 'package:flutter/material.dart';
import 'dart:ui';
class AnimatedPositionedRoute extends StatefulWidget {
@override
_AnimatedPositionedRouteState createState() {
// TODO: implement createState
return _AnimatedPositionedRouteState();
}
}
class _AnimatedPositionedRouteState extends State<AnimatedPositionedRoute> {
GlobalKey _key = GlobalKey();
double _top = 0;
double _left = 0;
bool _animate = false;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
key: _key,
title: Text('AnimatedPositioned'),
),
body: Container(
child: Stack(
children: <Widget>[
AnimatedPositioned(
top: _top,
left: _left,
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
curve: Curves.bounceOut,
duration: Duration(seconds: 1)
),
Center(
child: RaisedButton(
child: Text('start animate'),
onPressed: () {
setState(() {
_animate = !_animate;
if (_animate) {
_left = MediaQuery.of(context).size.width - 200;
_top = MediaQuery.of(context).size.height - 200 - _key.currentContext.size.height;
} else {
_left = 0;
_top = 0;
}
});
},
),
)
],
),
)
);
}
}
十五、AnimatedSize
当给定的孩子的大小变化时,它自动地在给定时间内转换它的大小。
import 'package:flutter/material.dart';
class AnimatedSizeRoute extends StatefulWidget{
@override
_AnimatedSizeRouteState createState() {
// TODO: implement createState
return _AnimatedSizeRouteState();
}
}
class _AnimatedSizeRouteState extends State<AnimatedSizeRoute> with SingleTickerProviderStateMixin{
double _size = 100.0;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('AnimatedSize'),
),
body: Center(
child: Column(
children: <Widget>[
AnimatedSize(
child: Container(
height: _size,
width: _size,
color: Colors.red,
),
curve: Curves.bounceOut,
duration: Duration(seconds: 1),
vsync: this,
),
RaisedButton(
child: Text('start animate'),
onPressed: (){
setState(() {
_size = (_size == 100.0 ? 300.0 : 100.0);
});
},
)
],
),
),
);
}
}