Flutter动画 5 - Flutter内置动画组件(1)

最新推荐文章于 2024-11-02 11:33:21 发布

2401_84149785

最新推荐文章于 2024-11-02 11:33:21 发布

阅读量869

点赞数 10

分类专栏：程序员文章标签： flutter

本文链接：https://blog.csdn.net/2401_84149785/article/details/138772908

版权

程序员专栏收录该内容

269 篇文章 0 订阅

订阅专栏

本篇文章大部分示例直接摘抄官方,具体可去动画&Motion Widget 查询.(PS:写不动了,着实写不动了. 😂 😂 😂 )

需要外部Animation支持的组件示例

DecoratedBoxTransition示例

final DecorationTween decorationTween = DecorationTween(
begin: BoxDecoration(
color: const Color(0xFFFFFFFF),
border: Border.all(style: BorderStyle.none),
borderRadius: BorderRadius.circular(60.0),
shape: BoxShape.rectangle,
boxShadow: const [
BoxShadow(
color: Color(0x66666666),
blurRadius: 10.0,
spreadRadius: 3.0,
offset: Offset(0, 6.0),
)
],
),
end: BoxDecoration(
color: const Color(0xFFFFFFFF),
border: Border.all(
style: BorderStyle.none,
),
borderRadius: BorderRadius.zero,
// No shadow.
),
);

late AnimationController _controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 3),
)…repeat(reverse: true);

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Center(
child: DecoratedBoxTransition(
position: DecorationPosition.background,
decoration: decorationTween.animate(_controller),
child: Container(
width: 200,
height: 200,
padding: const EdgeInsets.all(10),
child: const FlutterLogo(),
),
),
),
);
}

FadeTransition示例

late AnimationController _controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)…repeat(reverse: true);
late Animation _animation = CurvedAnimation(
parent: _controller,
curve: Curves.easeIn,
);

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: FadeTransition(
opacity: _animation,
child: const Padding(
padding: EdgeInsets.all(8),
child: FlutterLogo()
),
),
);
}

PositionedTransition示例

late AnimationController _controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)…repeat(reverse: true);

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
final double smallLogo = 100;
final double bigLogo = 200;

return LayoutBuilder(
builder: (context, constraints) {
final Size biggest = constraints.biggest;
return Stack(
children: [
PositionedTransition(
rect: RelativeRectTween(
begin: RelativeRect.fromSize(Rect.fromLTWH(0, 0, smallLogo, smallLogo), biggest),
end: RelativeRect.fromSize(Rect.fromLTWH(biggest.width - bigLogo, biggest.height - bigLogo, bigLogo, bigLogo), biggest),
).animate(CurvedAnimation(
parent: _controller,
curve: Curves.elasticInOut,
)),
child: Padding(
padding: const EdgeInsets.all(8),
child: FlutterLogo()
),
),
],
);
},
);
}

RotationTransition示例

@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示例

@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’)),
),
),
),
],
),
);
}