animation - 如何在 Flutter 中使用 Android 滚动行为为容器移动设置动画?
问题描述
我的目标是,有一个可以在垂直轴上拖动的容器。移开手指后,容器应该以我在结束触摸后的速度向前移动一点。在您停止在 Android 手机上滚动并且它会继续滚动更远一点后,我希望拥有完全相同的动画/感觉。
这是到目前为止的样子:
这是我的代码:
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
double _offeset = 0;
double get offset => _offeset;
set offset(double offeset) {
if(offeset < 500)
setState(() {
_offeset = offeset;
});
}
AnimationController controller;
ClampingScrollSimulation simulation;
@override
void initState() {
super.initState();
controller = AnimationController(vsync: this, upperBound: 5)
..addListener(() {
offset += controller.value;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Positioned(
top: offset,
left: 0,
right: 0,
child: GestureDetector(
onVerticalDragUpdate: (DragUpdateDetails details) {
offset += details.delta.dy;
},
onVerticalDragEnd: (DragEndDetails details) {
simulation = ClampingScrollSimulation(
position: 0, velocity: details.primaryVelocity,
);
controller.animateWith(simulation);
},
child: Container(height: 50, width: 50, color: Colors.red),
),
),
],
),
);
}
}
问题是,这不是 Android 滚动动画,我不知道如何获得它。(感觉动画是线性的,过早停止,没有利用velocity参数)我什至在用这个ClampingScrollSimulation
类,Flutter中所有的Scroll widgets都用这个类来模拟Android滚动。
解决方案
解决方案是将_controller.value
with相乘_controller.velocity
。像这样:
offset += controller.value * _controller.velocity / 100;
推荐阅读
- reactjs - 隐藏 Material-UI 自动完成弹出窗口,直到输入文本
- apache-kafka-streams - 使用 Kafka Streams Binder 和函数式处理器处理 Spring Cloud Streams 中的处理异常示例
- sqlite - sqlite BEGIN EXCLUSIVE 失败事务是否在“busy_timeout”期间不断重试?
- sql - 连接 2 个表的数据库设计最佳实践
- amazon-web-services - 仅通过使用 SQS::QueuePolicy 'principal' 属性的 Lambda 函数来限制对 SQS 的访问
- html - 导航栏菜单响应式
- java - Firebase 实施后没有静态方法
- angular - 可点击的 algolia 搜索结果?
- javascript - 如何使用 PWA 服务工作者在后台发送请求
- php - 如何在laravel中获取上个月的订单商品销售报告?