本文介绍了波纹动画颤动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

  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),
      ),
    );
  }

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

08-31 01:45