在Flutter中,有许多内置的动画组件可以使用,例如:AnimatedContainer
、SlideTransition
、FadeTransition
、ScaleTransition
等。
以下是一个使用AnimatedContainer
的示例,它可以在其尺寸和颜色改变时触发动画:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
AnimationController controller;
Animation<double> sizeAnim;
Animation<Color> colorAnim;
@override
void initState() {
super.initState();
controller = AnimationController(
duration: const Duration(seconds: 3),
vsync: this,
)..addListener(() => setState(() {}));
sizeAnim = Tween<double>(begin: 50.0, end: 150.0).animate(controller);
colorAnim = ColorTween(begin: Colors.red, end: Colors.blue).animate(controller);
controller.forward();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: AnimatedContainer(
duration: Duration(seconds: 3),
curve: Curves.easeInOut,
width: sizeAnim.value,
height: sizeAnim.value,
decoration: BoxDecoration(
color: colorAnim.value,
borderRadius: BorderRadius.circular(15.0),
),
),
),
);
}
}
在这个示例中,我们创建了一个AnimatedContainer
,并通过AnimationController
来控制其尺寸和颜色的变化。initState
方法中,我们定义了动画的持续时间和动画的起点和终点。然后,我们使用controller.forward()
来启动动画。在dispose
方法中,我们确保动画控制器被释放,以防内存泄漏。
这只是Flutter动画世界的一个开始,Flutter提供了许多其他的动画组件,每个都有其特定的用途。例如,RotationTransition
可以用来创建旋转动画,AnimatedBuilder
可以在任何其他widget的状态改变时触发动画等等。