import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
// 初始化动画控制器
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2),
);
// 设置动画
_animation = Tween<double>(begin: 0, end: 300).animate(_controller);
// 启动动画
_controller.forward();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter 动画示例'),
),
body: Center(
child: AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return Container(
width: _animation.value,
height: _animation.value,
color: Colors.blue,
);
},
),
),
);
}
@override
void dispose() {
// 销毁动画控制器
_controller.dispose();
super.dispose();
}
}
在这个例子中,我们创建了一个简单的动画,使一个蓝色的正方形在两秒内从大小为0逐渐变为大小为300。动画的实现使用了 AnimationController 和 Tween,并且通过 AnimatedBuilder 来构建动画的外观。
你可以根据你的需求修改这个例子,以实现不同类型的动画效果。
转载请注明出处:http://www.zyzy.cn/article/detail/9596/Flutter