Flutter 动画设置贝塞尔曲线

废话不多说直接上源码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';


class FixedServiceView extends StatefulWidget{
FixedServiceView({ this.sctrollController }) : super();
ScrollController sctrollController = new ScrollController();

@override
_FixedServiceView createState() {
return _FixedServiceView();
}

}

class _FixedServiceView extends State<FixedServiceView>{
// 滚动视图
ScrollController _sctrollController = new ScrollController();

@override
void initState() {
// TODO: implement initState
super.initState();
setState(() {
_sctrollController = widget.sctrollController;
});
}

@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
final width = size.width;

return Container(
margin: new EdgeInsets.fromLTRB(0, 0, 0, 10),
width: width,
height: 180,
alignment: Alignment.center,
color: Colors.transparent,
child: CurveWidget(sctrollController: _sctrollController),
);
}
}

// 自定义曲线视图
class CurveWidget extends StatefulWidget{
ScrollController sctrollController = new ScrollController();
CurveWidget({this.sctrollController}) : super();

@override
_CurveWidget createState() {
return _CurveWidget();
}
}

class _CurveWidget extends State<CurveWidget> {
ScrollController _sctrollController = new ScrollController();
double _offsetY = 60;
@override
void initState() {
// TODO: implement initState
super.initState();
setState(() {
_sctrollController = widget.sctrollController;
_sctrollController.addListener(() {
setState(() {
var tempOffsetY = 60 - _sctrollController.offset;
if (tempOffsetY > 60) {
tempOffsetY = 60;
}else if (tempOffsetY < 0) {
tempOffsetY = 0;
}
_offsetY = tempOffsetY;
});
});
});
}

@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
final width = size.width;
return Container(
width: width,
height: 180,
color: Colors.transparent,
child: CustomPaint(foregroundPainter: BezierPainter(offsetY: _offsetY),),
);
}
}

// 曲线路径
class BezierPainter extends CustomPainter {
double offsetY;

BezierPainter({ this.offsetY });

@override
void paint(Canvas canvas, Size size) {
// TODO: implement paint
final paint = Paint();
paint.color = Colors.white;
paint.style = PaintingStyle.fill;
var path = Path();
// 原点 p1
path.moveTo(0, 0);
//第2个点
var controlPoint = Offset(size.width / 2, offsetY);
var ednPoint = Offset(size.width, 0);
path.quadraticBezierTo(
controlPoint.dx,
controlPoint.dy,
ednPoint.dx,
ednPoint.dy
);
//第3个点
path.lineTo(size.width, size.height);
//第4个点
path.lineTo(0, size.height);
path.lineTo(0, 0);
path.close();
canvas.drawPath(path, paint);
}

@override
bool shouldRepaint(CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return true;
}
}

posted @ 2020-08-17 13:40  D-Ben  阅读(778)  评论(0编辑  收藏  举报