返回
Flutter 动画效果详细讲解，揭秘组件过度动画、物理动画等
IOS
2024-01-06 07:03:07
一、Flutter 的基本动画组件
1. Hero 动画
Hero 动画主要用于在两个路由之间或同一路由内部进行动画过渡，实现元素从一个位置到另一个位置的移动。它可以实现流畅、华丽的过渡效果，提升用户体验。
2. AnimatedWidget 动画
AnimatedWidget 动画是一种基于 Widget 的动画，它允许您以声明式的方式控制动画的属性。AnimatedWidget 内部有一个名为 build 的方法，该方法会根据动画的当前状态生成对应的 Widget。
二、Flutter 的高级动画效果
除了 Hero 动画和 AnimatedWidget 动画外，Flutter 还提供了更高级的动画效果，包括组件过度动画、物理动画、隐式动画、显式动画和交织动画。
1. 组件过度动画
组件过度动画允许您在组件之间进行动画过渡。您可以使用 Transition 或 FadeTransition 等类来实现组件过度动画。
2. 物理动画
物理动画允许您创建具有物理性质的动画，如弹跳、重力和摩擦等。您可以使用 SpringSimulation 或 ScrollSimulation 等类来实现物理动画。
3. 隐式动画
隐式动画允许您在不显式指定动画属性的情况下创建动画。您可以使用 AnimatedBuilder 或 AnimatedSwitcher 等类来实现隐式动画。
4. 显式动画
显式动画允许您显式地控制动画的属性。您可以使用 AnimationController 和 Tween 等类来实现显式动画。
5. 交织动画
交织动画允许您将多个动画组合在一起，以创建更复杂的动画效果。您可以使用 AnimatorSet 类来实现交织动画。
三、Flutter 动画效果实例
为了帮助您更好地理解这些动画效果，我们提供了一些实例代码：
1. 组件过度动画实例
import 'package:flutter/material.dart';
class MyFadeTransition extends StatefulWidget {
const MyFadeTransition({Key? key}) : super(key: key);
@override
_MyFadeTransitionState createState() => _MyFadeTransitionState();
}
class _MyFadeTransitionState extends State<MyFadeTransition>
with SingleTickerProviderStateMixin {
AnimationController? _controller;
Animation<double>? _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this, duration: const Duration(milliseconds: 500));
_animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller!);
}
@override
void dispose() {
_controller!.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return FadeTransition(
opacity: _animation!,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
);
}
}
2. 物理动画实例
import 'package:flutter/material.dart';
class MySpringSimulation extends StatefulWidget {
const MySpringSimulation({Key? key}) : super(key: key);
@override
_MySpringSimulationState createState() => _MySpringSimulationState();
}
class _MySpringSimulationState extends State<MySpringSimulation>
with SingleTickerProviderStateMixin {
AnimationController? _controller;
Animation<double>? _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this, duration: const Duration(milliseconds: 500));
_animation = SpringSimulation(SpringDescription(
mass: 1.0,
stiffness: 100.0,
damping: 10.0),
0.0,
1.0,
0.0);
}
@override
void dispose() {
_controller!.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller!,
builder: (context, child) {
return Transform.translate(
offset: Offset(0, _animation!.value * 200),
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
);
},
);
}
}
3. 隐式动画实例
import 'package:flutter/material.dart';
class MyAnimatedBuilder extends StatefulWidget {
const MyAnimatedBuilder({Key? key}) : super(key: key);
@override
_MyAnimatedBuilderState createState() => _MyAnimatedBuilderState();
}
class _MyAnimatedBuilderState extends State<MyAnimatedBuilder>
with SingleTickerProviderStateMixin {
AnimationController? _controller;
Animation<double>? _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this, duration: const Duration(milliseconds: 500));
_animation = CurvedAnimation(
parent: _controller!, curve: Curves.easeInOutCubic);
}
@override
void dispose() {
_controller!.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animation!,
builder: (context, child) {
return Transform.scale(
scale: _animation!.value,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
);
},
);
}
}
4. 显式动画实例
import 'package:flutter/material.dart';
class MyAnimatedWidget extends StatefulWidget {
const MyAnimatedWidget({Key? key}) : super(key: key);
@override
_MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}
class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
with SingleTickerProviderStateMixin {
AnimationController? _controller;
Animation<double>? _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this, duration: const Duration(milliseconds: 500));
_animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller!);
}
@override
void dispose() {
_controller!.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedWidget(
listenable: _controller!,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
builder: (context, child) {
return Transform.scale(
scale: _animation!.value,
child: child,
);
},
);
}
}
5. 交织动画实例
import 'package:flutter/material.dart';
class MyAnimatorSet extends StatefulWidget {
const MyAnimatorSet({Key? key}) : super(key: key);
@override
_MyAnimatorSetState createState() => _MyAnimatorSetState();
}
class _MyAnimatorSetState extends State<MyAnimatorSet>
with SingleTickerProviderStateMixin {
AnimationController? _controller;
Animation<double>? _animation1;
Animation<double>? _animation2;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this, duration: const Duration(milliseconds: 500));
_animation1 = Tween<double>(begin: 0.0, end: 1.0).animate(_controller!);
_animation2 = Tween<double>(begin: 1.0, end: 0.0).animate(_controller!);
}
@override
void dispose() {
_controller!.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _
