flutter-簡單實現找妹子自定義view

小蘿蔔頭醬發表於2021-05-28
FlutterView

flutter-簡單實現找妹子自定義view

前今天看到別人kotlin實現了一下，今天準備用flutter實現一下

1.老規矩，先上圖

找妹子2.gif

2.需要了解的知識點

1.動畫控制類 AnimationController

2.自定義view 類CustomPaint

3.view分析

基本思路：

1.首先中心必須有一個圓形頭像，考慮用ClipOval來實現。

2.圓形頭像有放大縮小動畫，考慮用AnimationController老控制頭像的寬度和高度

3.以頭像中心點為圓心畫圓，需要考慮到半徑的不斷變化和畫筆顏色透明度的變化

先畫6個不同大小的圓，半徑大小間隔一樣 ，透明度依次向外遞減。

image-20210528171112118.png

///可以通過改變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一樣。

生活太難，依然還是快樂下去。加油！

相關文章