zoukankan      html  css  js  c++  java
  • 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,
    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,
    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;
    }
    }

  • 相关阅读:
    MongoDB环境配置
    Python之路【第二十七篇】:反射
    Socket网络通讯,TCP三次握手和四次释放,与UDP的差别
    iOS 常用第三方
    UISegmentedControl的使用
    OC取应用程序目录的路径
    KVC中setValuesForKeysWithDictionary
    KVC和KVO的简单对比
    C语言 内存和地址
    html基础知识
  • 原文地址:https://www.cnblogs.com/diweinan/p/13517134.html
Copyright © 2011-2022 走看看