flutter-简单实现找妹子自定义view

flutter-简单实现找妹子自定义view

前今天看到别人kotlin实现了一下，今天准备用flutter实现一下

1.老规矩，先上图

2.需要了解的知识点

1.动画控制类 AnimationController

2.自定义view 类CustomPaint

3.view分析

基本思路：

1.首先中心必须有一个圆形头像，考虑用ClipOval来实现。

2.圆形头像有放大缩小动画，考虑用AnimationController老控制头像的宽度和高度

3.以头像中心点为圆心画圆，需要考虑到半径的不断变化和画笔颜色透明度的变化

先画6个不同大小的圆，半径大小间隔一样 ，透明度依次向外递减。

///可以通过改变opacity来改变透明度
Color.fromRGBO(int r, int g, int b, double opacity) 

///更改半径来画不同大小的圆
drawCircle(Offset c, double radius, Paint paint) 

///定义画笔
Paint _paint; _paint = new Paint()
        ..color = Color.fromRGBO(255,182,193, control.opac[i].toDouble());    
复制代码

4.代码实现

///基本布局

@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Container(
      child: Stack(
        children: [
          CustomPaint(
            foregroundPainter: PaintGirls(control),
          ),
          Container(
            child: ClipOval(
                child: Image(
                  image: NetworkImage(
                      "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=398732417,1147058696&fm=26&gp=0.jpg"),
                  width:  _animationController.value,
                  height:  _animationController.value,
                  fit: BoxFit.cover,
                )
            ),
              ///此处头像放大缩小，边距要跟着变
            margin: EdgeInsets.only(left: 90-_animationController.value/2,top: 90-_animationController.value/2),
          ),
        ],
      ),
    );
  }
复制代码

class FindGirlsControl extends GetxController{
  var size= [20,30,40,50,60,70].toList().obs;
  var opac= [1,0.84,0.68,0.52,0.36,0.2].toList().obs;
}
复制代码

///动画

AnimationController _animationController;
  final FindGirlsControl control = Get.put(FindGirlsControl());
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    const oneSec = const Duration(milliseconds: 75); //间隔1秒
    Timer qrtimer = new Timer.periodic(oneSec, (timer) {
      _change();
    });

    ///头像宽高在40-60之间变化
    _animationController = AnimationController(
        duration: Duration(seconds: 2),
        lowerBound: 40.0,
        upperBound: 60.0,
        vsync: this);

    _animationController.addListener(() {
      setState(() {});
    });

    ///动画重复播放，播放完反向播放
    _animationController.repeat(reverse: true);
  }

  ///变化不同圆的半径和透明度
  void _change() {
    for(int i=control.size.length-1;i>=0;i--){
      if(control.size[i]<=80) {
        control.size[i] += 1;
        control.opac[i] = control.opac[i] - 0.016;
        if(control.opac[i]<0){
          control.opac[i]=0;
        }
        if(control.size[i]==80){
          control.opac[i]=0;
        }
      }else{
        control.size[i]=20;
        control.opac[i]=1.0;
      }
    }

  }
复制代码

//画圆
class PaintGirls extends CustomPainter{

  final FindGirlsControl control ;

  PaintGirls(this.control);


  @override
  void paint(Canvas canvas, Size sizes) {

    for(int i=0;i<control.size.length;i++){
      Paint _paint; _paint = new Paint()
        ..color = Color.fromRGBO(255,182,193, control.opac[i].toDouble());
      canvas.drawCircle(Offset(90,90), control.size[i].toDouble(), _paint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return true;
  }
}
复制代码

5.总结

代码相通，思路对了flutter和kotlin一样。

生活太难，依然还是快乐下去。加油！