Flutter-实现抽屉动画
import 'package:flutter/material.dart';
class DrawerAnimationPage extends StatefulWidget {
DrawerAnimationPage({Key key}) : super(key: key);
@override
_DrawerAnimationPageState createState() => _DrawerAnimationPageState();
}
class _DrawerAnimationPageState extends State<DrawerAnimationPage> with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<Offset> _slideAnimation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(milliseconds: 200),
vsync: this,
);
_slideAnimation = Tween<Offset>(
begin: Offset.zero,
end: Offset(0.8, 0.0), // 水平方向上移动0.8倍,垂直方向不动
).animate(_controller);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(
child: Text('点击打开抽屉'),
onPressed: () => _controller.forward(), // 当按钮被点击时,开始动画
),
),
drawer: SlideTransition( // 使用SlideTransition来应用动画
position: _slideAnimation,
child: Drawer(),
),
);
}
}
这段代码实现了一个简单的抽屉打开动画。当用户点击按钮时,_controller.forward()
被调用,SlideTransition
使用_slideAnimation
定义的动画来平滑移动抽屉到屏幕上。这个例子展示了如何结合AnimationController
和Tween
来创建和控制动画。
评论已关闭