之前在做unity3d的时候，unity3d里会自带图片的冷却效果，而在flutter上当时找了很久也没有找到，最后就只能自己实现了，我实现的方法不一定是最效率的（因为官方是这样写的：Clipping to a path is expensive。也就是这种剪切的方式是很消耗性能的），只是当前我能实现的方式。（毕竟还是一个初学者）。
class _LoadingState extends State<Loading> 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: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Image.asset("web/assets/images/0.jpg",width: 50.0,height: 50.0,)
],
),
SizedBox(height: 150.0,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
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: <Widget>[
Text("LOADING.",style: new TextStyle(
fontSize: 30.0,
color: Colors.black,
decoration: TextDecoration.none,
),)
],
)
],
),
);
}
}
class BottomWavelipper extends CustomClipper<Path>{
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;
}
}
网友评论