以下是一个示例,演示如何在按下一个小部件后将动画小部件返回到其之前的状态:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Animation Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State
with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation _animation;
@override
void initState() {
super.initState();
// 初始化动画控制器
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 500),
);
// 定义动画曲线(可选)
final curve = CurvedAnimation(
parent: _controller,
curve: Curves.easeInOut,
);
// 定义动画范围和起始位置
_animation = Tween(
begin: Offset.zero,
end: Offset(0.5, 0),
).animate(curve);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _handleButtonPress() {
if (_controller.isCompleted) {
_controller.reverse(); // 当动画已完成时,反转动画
} else {
_controller.forward(); // 当动画未完成时,开始动画
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animation Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SlideTransition(
position: _animation, // 使用动画
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
),
SizedBox(height: 20),
RaisedButton(
onPressed: _handleButtonPress, // 按下按钮时触发动画
child: Text('按下切换动画'),
),
],
),
),
);
}
}