在按钮按下颤动时开始滑入动画

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() 会发生什么

以上是关于在按钮按下颤动时开始滑入动画的主要内容,如果未能解决你的问题,请参考以下文章

如何在幻灯片中添加滚动动画?

SwiftUI 动画滑入和滑出

IOS - 按钮从右侧动画滑入

overridePendingTransition 用于平滑地滑入和滑出活动

如何让 UIView / Menu 滑入和滑出? (使用 C# 而不是 Swift 的 Xamarin IOS)

从导航堆栈中弹出视图控制器时从右侧滑入