如何在不使用AnimatedAlign的情况下设置"对齐"的动画并控制动画

Question

我试图在Flutter中实现一个非常简单的动画，但我被卡住了。

当前动画如下(iPhone屏幕录制(：https://drive.google.com/file/d/10pzUadQrSr85eLLpyh7v3lt-x8XjFNec/view?usp=sharing

我目前正在用Positioned做这件事，但我不能完全按照我的意愿去做。有没有任何机会，我可以做这个动画与对齐小工具。

我尝试过使用AnimateAlign和Tweens，但它们都不允许我通过在底部页面上向上或向下滚动来修改图像的位置。

代码：

late AnimationController bottomSheetController;
double bsOffset = 1;
@override
void initState() {
super.initState();
bottomSheetController = BottomSheet.createAnimationController(this);
bottomSheetController.duration = Duration(milliseconds: 200);
bottomSheetController.addListener(() {
double size = (bottomSheetController.value.toDouble() - 1) * -1;
setState(() {
if (size != 0) {
bsOffset = size;
}
});
});
}
.
.
.
void _handleFABPressed() {
showModalBottomSheet(
backgroundColor: Colors.transparent,
barrierColor: Colors.transparent,
transitionAnimationController: bottomSheetController,
context: context,
builder: (context) {
return Popover(
child: Container(
height: 400,
// color: Colors.lightBlue,
),
);
},
);
}
.
.
.
child: Stack(
alignment: Alignment.topCenter,
children: [
Positioned(
bottom: 50 - (50 * bsOffset),
left: ((200 / 2) - 20) - (((200 / 2) - 20) * (bsOffset - 1) * -1),
child: Image.asset(
'assets/images/8.png',
width: 200,
),
),
],
),

谢谢！

Answer 1

如果我移动Align和底部这两个小部件，我会这样做：

void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
late AnimationController _animationController;
late Animation<Offset> _animationOffset;
var _alignment = Alignment.bottomCenter;
void _show() {
showModalBottomSheet(
backgroundColor: Colors.transparent,
barrierColor: Colors.transparent,
transitionAnimationController: _animationController,
context: context,
builder: (context) {
return Container(
height: 400,
color: Colors.red,
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Demo Home Page'),
),
body: Stack(
children: [
Align(
alignment: _alignment,
child: const SizedBox(
width: 100, height: 100, child: Card(color: Colors.red)))
],
),
floatingActionButton:
FloatingActionButton(onPressed: _show, child: const Icon(Icons.add)),
);
}
void _onListenerAnimation() {
setState(() {
_alignment =
Alignment(_animationOffset.value.dx, _animationOffset.value.dy);
});
}
@override
void initState() {
super.initState();
_animationController = AnimationController(
vsync: this, duration: const Duration(milliseconds: 200))
..addListener(_onListenerAnimation);
_animationOffset = Tween<Offset>(
begin: const Offset(0, 1),
end: const Offset(-1, -0.6),
).animate(_animationController);
}
@override
void dispose() {
super.dispose();
_animationController
..removeListener(_onListenerAnimation)
..dispose();
}
}