脉冲动画按钮颤动

Question

我正在寻找在颤振中制作这个脉冲动画按钮。

有人可以帮助我吗？

Answer 1

这与您的类似，avatar_glow：

AvatarGlow(
 endRadius: 60.0,
 child: Material(     // Replace this child with your own
   elevation: 8.0,
   shape: CircleBorder(),
   child: CircleAvatar(
     backgroundColor: Colors.grey[100],
     child: Image.asset(
       'assets/images/dart.png',
       height: 50,
     ),
     radius: 30.0,
   ),
 ),
),

Answer 2

如果你想在没有库的情况下自己实现它（为了更好地理解或主动编辑），让我们看一下：

动画由 scale + fade

组合而成

所以我们使用

Stack

小部件，动画小部件位于图标播放后面，然后我们将使用

FadeTransition

和

ScaleTransition

让动画小部件同时淡出和缩放

1. 声明缩放和淡入淡出动画

late final AnimationController _controller = AnimationController(
  vsync: this,
  duration: const Duration(milliseconds: 1500),
)..repeat();
late final Animation<double> _scaleAnimation = Tween<double>(begin: 0.6, end: 1.2).animate(_controller);
late final Animation<double> _fadeAnimation = Tween<double>(begin: 1, end: 0.2).animate(_controller);

2. 还有与此类似的小部件

return Stack(
  alignment: AlignmentDirectional.center,
  children: [
    FadeTransition(
      opacity: _fadeAnimation,
      child: ScaleTransition(
        scale: _scaleAnimation,
        child: Container(
          width: 50 * 1.5,
          height: 50 * 1.5,
          decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.green.shade300),
        ),
      ),
    ),
    Icon(
      Icons.play_circle,
      size: 50,
      color: Colors.green,
    )
  ],
);

3. 处置控制器

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}