波纹动画颤动 [英] Ripple animation flutter

问题描述

我想使用颤动创建涟漪动画。我已经知道涟漪效应，但这不是我想要的，我想要的是

  AnimationController _controller; 
 
 @override 
 void initState（）{
 super.initState（）; 
 _controller = AnimationController（
 vsync：this，
 lowerBound：0.5，
 duration：Duration（seconds：3），
）.. repeat（）; 
} 
 
 @override 
小部件构建（BuildContext上下文）{
 return Scaffold（
 appBar：AppBar（title：Text（ Title）） ，
正文：_buildBody（），
）; 
} 
 
小部件_buildBody（）{
 return AnimatedBuilder（
动画：CurvedAnimation（父级：_controller，曲线：Curves.fastOutSlowIn），
构建器： （上下文，子项）{
 return Stack（
alignment：Alignment.center，
子项：< Widget> [
 _buildContainer（150 * _controller.value），
 _buildContainer（200 * _controller.value），
 _buildContainer（250 * _controller.value），
 _buildContainer（300 * _controller.value），
 _buildContainer（350 * _controller.value），
 Align（child：Icon（Icons.phone_android，size：44，）），
]，
）; 
}，
）; 
} 
 
小部件_buildContainer（double radius）{
 return Container（
 width：radius，
 height：radius，
装饰：BoxDecoration （
形状：BoxShape.circle，
颜色：Colors.blue.withOpacity（1-_controller.value），
），
）； 
} 
  

I want to create ripple animation using flutter. I already know ripple effect but this is not what I want , I want something which is here in the link

解决方案

Output

  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      lowerBound: 0.5,
      duration: Duration(seconds: 3),
    )..repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Title")),
      body: _buildBody(),
    );
  }

  Widget _buildBody() {
    return AnimatedBuilder(
      animation: CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn),
      builder: (context, child) {
        return Stack(
          alignment: Alignment.center,
          children: <Widget>[
            _buildContainer(150 * _controller.value),
            _buildContainer(200 * _controller.value),
            _buildContainer(250 * _controller.value),
            _buildContainer(300 * _controller.value),
            _buildContainer(350 * _controller.value),
            Align(child: Icon(Icons.phone_android, size: 44,)),
          ],
        );
      },
    );
  }

  Widget _buildContainer(double radius) {
    return Container(
      width: radius,
      height: radius,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.blue.withOpacity(1 - _controller.value),
      ),
    );
  }

这篇关于波纹动画颤动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！