flutter 通过ClipPath 和动画实现游戏cd冷却效果

之前在做unity3d的时候，unity3d里会自带图片的冷却效果，而在flutter上当时找了很久也没有找到，最后就只能自己实现了，我实现的方法不一定是最效率的（因为官方是这样写的：Clipping to a path is expensive。也就是这种剪切的方式是很消耗性能的），只是当前我能实现的方式。（毕竟还是一个初学者）。

class _LoadingState extends State with SingleTickerProviderStateMixin{

  AnimationController animationController;

  Animation animation;

@override

  void initState() {

    // TODO: implement initState

    super.initState();

    animationController = AnimationController(vsync: this,duration: Duration(milliseconds: 1000));

    animation = Tween(begin: 0.0,end: 360.0).animate(animationController);

    animationController.addListener((){

        setState(() {



        });

    });

    animation.addStatusListener((status){

      if(status == AnimationStatus.completed){

          StringData().SetIsStartUi(true);

          Navigator.push(context, MaterialPageRoute(builder: (context) => MainUi()));

      }

    });

    animationController.forward();

  }

  @override

  Widget build(BuildContext context) {

    return Container(

      padding: const EdgeInsets.all(15.0),

      decoration: new BoxDecoration(

        image: new DecorationImage(

          image: AssetImage("web/assets/images/bg.jpg"),

          fit: BoxFit.cover

        )

      ),

      child: Column(

        children: [

          Row(



            mainAxisAlignment: MainAxisAlignment.start,

            children: [

              Image.asset("web/assets/images/0.jpg",width: 50.0,height: 50.0,)

            ],

          ),

          SizedBox(height: 150.0,),

          Row(

            mainAxisAlignment: MainAxisAlignment.center,

            children: [

              ClipPath(

                clipBehavior: Clip.antiAlias,

              child: Image.asset("web/assets/images/icon.png",width:200.0,height: 200.0,),

              clipper: BottomWavelipper(radius: animation.value),

              )

            ],

          ),

          SizedBox(height: 20.0,),

          Row(

            mainAxisAlignment: MainAxisAlignment.center,

            children: [

              Text("LOADING.",style: new TextStyle(

                fontSize: 30.0,

                color: Colors.black,

                decoration: TextDecoration.none,

              ),)

            ],

          )

        ],

      ),

    );

  }

}

class BottomWavelipper extends CustomClipper{

  final double radius;

  BottomWavelipper({this.radius});

  double GetX(double m_width,double radius){

    double value;

    if(radius >=0 && radius <= 45){

        value = m_width/2 +(m_width/90 * radius);

    }else if(radius >45 && radius <= 135){

      value= m_width;

    }else if(radius >135 && radius <= 225 ){

      value = m_width - (m_width/90 *(radius-135));

    }else if(radius > 225 && radius <= 315){

      value = 0;

    }else if(radius> 315 && radius <= 360){

      value = m_width/90 *(radius-315);

    }

    return value;

  }

  double GetY(double m_height,double radius){

    double value;

    if(radius >=0 && radius <= 45){

        value = 0.0;

    }else if(radius >45 && radius <= 135){

      value= (m_height/90) *(radius -45);

    }else if(radius >135 && radius <= 225 ){

      value = m_height;

    }else if(radius > 225 && radius <= 315){

      value = m_height -(m_height/90* (radius-225));

    }else if(radius> 315 && radius <= 360){

      value = 0.0;

    }

    return value;

  }

  @override

  Path getClip(Size size) {

    Path path = new Path();

    path.lineTo(size.width/2, 0.0);

    path.lineTo(size.width/2, size.height/2);

    path.lineTo(GetX(size.width, radius),GetY(size.height, radius));

    if(radius > 315){

      path.lineTo(0.0, 0.0);

    }

    if(radius >225){

      path.lineTo(0.0, size.height);

    }

    if(radius > 135){

      path.lineTo(size.width, size.height);

    }

    if(radius >45 ){

      path.lineTo(size.width, 0.0);

    }





    path.close();

    return path;

  }

  @override

  bool shouldReclip(BottomWavelipper oldClipper) {

    // TODO: implement shouldReclip

    return true;

  }

}