在按钮按下颤动时开始滑入动画
Posted
技术标签:
【中文标题】在按钮按下颤动时开始滑入动画【英文标题】:Start slide-in animation on button press flutter 【发布时间】:2021-03-08 14:28:30 【问题描述】:如何重构此滑入式动画代码以在我的按钮上使用 onLongPress:
@override void initState()
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)..repeat(reverse: true);
_offsetAnimation = Tween<Offset>(
begin: Offset.zero,
end: const Offset(1.5, 0.0),
).animate(CurvedAnimation(
parent: _controller,
curve: Curves.elasticIn,
));
现在动画会自动重复播放。我希望列表仅在按下按钮 3 秒后滑入。这是我的按钮代码。
child: RaisedButton(
onPressed: (null),
autofocus: false,
clipBehavior: Clip.none,
color: Colors.red,
onLongPress: () =>
setState(()
isEmerg = !isEmerg;
),
// Navigator.pushReplacement(
// context,
// MaterialPageRoute(
// builder: (context) => AnimationTest()))
,
child: Text(
'Hold for 3 Secs',
style: TextStyle(
fontWeight: FontWeight.w400,
color: Colors.white,
fontSize: 24.0,
fontFamily: 'Circular'),
),
shape: CircleBorder(),
padding: EdgeInsets.all(70),
),
这是我在LongPress上显示的列表:
SlideTransition(
position: _offsetAnimation,
child: Container(
child: ListView.builder(
itemCount: messages.length,
itemBuilder: (context, index)
return Card(
child: ListTile(
onTap: () ,
title: Text(messages[index].emergencyType),
subtitle: Text(messages[index].description),
leading: Icon(Icons.message_outlined),
trailing: Text('Send'),
tileColor: Colors.white,
),
);
)),
),
【问题讨论】:
【参考方案1】:在初始化时改变
_controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)..repeat(reverse: true);
到
_controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
);
和 onLongPress 添加
_controller.forward();
【讨论】:
原来动画完全停止了。该列表永久可见。 您希望它在 longPressed 上重复吗? 不,我只想让它播放一次,但它根本不播放。列表只是坐在那里而没有动画——例如,当屏幕加载时,列表也会随之加载 拨打_controller.forward()
会发生什么以上是关于在按钮按下颤动时开始滑入动画的主要内容,如果未能解决你的问题,请参考以下文章
overridePendingTransition 用于平滑地滑入和滑出活动