实现效果
项目源码
对flutter中的动画不了解的可以看这篇 Flutter 动画入门
实现
- 首先将界面拆解成两部分 menu 和 homePage 使用Stack组件将两者包裹起来(类似使用FrameLayout)
return Scaffold(
backgroundColor: backgroundColor,
body: Stack(
children: <Widget>[menu(context), homePage(context)],
),
);
menu
- menu的动画可以分解成两部分:
- 平移:从左侧推入
- 缩放:从0.0放大至1.0
- menu动画初始化如下:
// 初始化menu缩放动画,从0.0放大至1.0
_menuScaleAnimation =
Tween<double>(begin: 0.0, end: 1).animate(_controller);
// 初始化page平移动画,从左侧推入
_slideAnimation = Tween<Offset>(begin: Offset(-1, 0), end: Offset(0, 0))
.animate(_controller);
- menu动画具体使用
return SlideTransition(
// 设置平移动画
position: _slideAnimation,
child: ScaleTransition(
scale: _menuScaleAnimation,
...
)
)
- 关于推进动画,下图说明
homePage
-
homePager的动画分为两部分
- 平移:平移伴随着尺寸的变化
- 缩放:从1.0缩小至0.8
-
homePage动画初始化如下:
// 初始化page缩放动画,从1.0缩小至0.8
_pagescaleAnimation = Tween<double>(begin: 1, end:
0.8).animate(_controller);
- homePage动画具体使用
return AnimatedPositioned(
// AnimatedPositioned尺寸随着平移动画变化(只有Stack的child才会生效)
duration: duration,
top: 0,
bottom: 0,
// homePage左边缘距离屏幕距离
left: isCollapsed ? 0 : 0.6 * screenWidth,
// homePage右边缘距离屏幕距离
right: isCollapsed ? 0 : -0.4 * screenWidth,
child: ScaleTransition(
// 设置滑动的缩放动画
scale: _pagescaleAnimation,
...
)
)