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;
    }
    }

  • 相关阅读:
    使用 Dockerfile 自定义 Nginx 镜像
    Windows下Rancher复制Pod内文件到本地
    SSL基础知识及Nginx/Tomcat配置SSL
    linux内核源码
    strace:跟踪进程的系统调用 、ltrace:跟踪进程调用库函数,runlevel & init & service
    C10K,C10M问题
    操作系统
    深入理解GOT表和PLT表
    为什么 List<Struct> 在 C# 中的分配速度比 List<Class> 快 15 倍
    如何计算时间复杂度
  • 原文地址:https://www.cnblogs.com/diweinan/p/13517134.html
Copyright © 2011-2022 走看看