Unity贝塞尔曲线之美体验

最近项目中用到了贝塞尔曲线,学习完成后记录一下自己的学习结果吧。

一阶贝塞尔曲线

一阶贝塞尔曲线就是一条线,我们很容易根据 t 求出 t 点的位置。

P(t)=P0+(P1-P0)*t =(1-t)*P0+tP1  ;   t[ 0,1] ,且其等同于线性插值。

二阶贝塞尔曲线

取平面内三个不共线的点,AB:AC=CD:CE,这个时候BD又是一条直线,可以按照一阶的贝塞尔方程来进行线性插值了。

P(B)=(1-t)*P0+tP1 ;

P(D)=(1-t)P1+tP2  ;

P(t)=(1-t)*P(B)+tP(D)

=(1-t)*((1-t)*P0+tP1)+t((1-t)P1+tP2 )

=(1-t)² *P0+2t*(1-t)*P1+t²*P2  ;t[0,1];

代码:

public LineRenderer line_b;
public LineRenderer line_a;
public LineRenderer line_c;

public Transform start;
public Transform end;
public Transform c;

    void Start()
    {

    }
    void Update()
    {

        line_a.SetPosition(0, start.position);
        line_a.SetPosition(1, c.position);
        line_c.SetPosition(0, end.position);
        line_c.SetPosition(1, c.position);

       // float distance = Vector3.Distance(start.position, end.position);
        Vector3 controlPoint = c.position;
            //start.position + (start.position+ c.position).normalized * distance / 1.6f;

        Vector3[] bcList = GetBeizerPathPointList(start.position, controlPoint, end.position, 50);
        line_b.positionCount = bcList.Length + 1;
        line_b.SetPosition(0, start.position);
        for (int i = 0; i < bcList.Length; i++)
        {
            Vector3 v = bcList[i];
            line_b.SetPosition(i + 1, v);
        }

    }
    public static Vector3[] GetBeizerPathPointList(Vector3 startPoint, Vector3 controlPoint, Vector3 endPoint, int pointNum)
    {
        Vector3[] BeizerPathPointList = new Vector3[pointNum];
        for (int i = 1; i <= pointNum; i++)
        {
            float t = i / (float)pointNum;
            Vector3 point = GetBeizerPathPoint(t, startPoint,
                controlPoint, endPoint);
            BeizerPathPointList[i - 1] = point;
        }
        return BeizerPathPointList;
    }

    //贝塞尔曲线二次方公式
    private static Vector3 GetBeizerPathPoint(float t, Vector3 p0, Vector3 p1, Vector3 p2)
    {
        return (1 - t) * (1 - t) * p0 + 2 * t * (1 - t) * p1 + t * t * p2;
    }

三阶贝塞尔曲线

三阶贝塞尔曲线和二阶其实是同一个道理,都可以按照一阶的贝塞尔方程来进行线性插值。这里就直接上公式了。

P(t)=P0*(1-t)³ +3P1*t*(1-t)²+3P2*t²*(1-t)+P3*t³ ; t[0,1];

代码

public Transform start;
public Transform end;
public Transform c0;
public Transform c1;

    public LineRenderer line_b;
    public LineRenderer line_a;
    public LineRenderer line_c;
    public LineRenderer line_d;
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {
        line_a.SetPosition(0, start.position);
        line_a.SetPosition(1, c0.position);

        line_c.SetPosition(0, c1.position);
        line_c.SetPosition(1, c0.position);

        line_d.SetPosition(0, c1.position);
        line_d.SetPosition(1, end.position);

        Vector3[] bcList = GetBeizerPathPointList(start.position, c0.position,c1.position, end.position, 50);
        line_b.positionCount = bcList.Length + 1;
        line_b.SetPosition(0, start.position);
        for (int i = 0; i < bcList.Length; i++)
        {
            Vector3 v = bcList[i];
            line_b.SetPosition(i + 1, v);
        }

    }

    public static Vector3[] GetBeizerPathPointList(Vector3 startPoint, Vector3 controlPoint0, Vector3 controlPoint1, Vector3 endPoint, int pointNum)
    {
        Vector3[] BeizerPathPointList = new Vector3[pointNum];
        for (int i = 1; i <= pointNum; i++)
        {
            float t = i / (float)pointNum;
            Vector3 point = GetBeizerPathPoint(t, startPoint,
                controlPoint0, controlPoint1, endPoint);
            BeizerPathPointList[i - 1] = point;
        }
        return BeizerPathPointList;
    }

    //贝塞尔曲线三次方公式
    private static Vector3 GetBeizerPathPoint(float t, Vector3 p0, Vector3 p1, Vector3 p2,Vector3 p3)
    {
        return (1 - t) * (1 - t) * (1 - t) * p0 +
                3 * p1 * t * (1 - t) * (1 - t) +
                3 * p2 * t * t * (1 - t) +
                p3 * t * t * t;
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Unity绘制二维动态曲线

    一.前言 之前用Line Render实现过这个动态曲线的绘制,使用这个实在太不方便了,一直寻思怎么在一张图片上通过控制图片的像素值实现曲线的动态绘制.参考了Unity的官网教程实现了这个,效果图如图所示: 这样实现的效果比LineRender 要好,并且不怎么消耗计算和渲染 二.实现 1.代码创建一个背景贴图,并将这个贴图给UGUI的RawImage控件 //创建背景贴图 widthPixels = (int)(Screen.width * width); heightPixels = (in

  • Unity贝塞尔曲线之美体验

    最近项目中用到了贝塞尔曲线,学习完成后记录一下自己的学习结果吧. 一阶贝塞尔曲线 一阶贝塞尔曲线就是一条线,我们很容易根据 t 求出 t 点的位置. P(t)=P0+(P1-P0)*t =(1-t)*P0+tP1  :   t[ 0,1] ,且其等同于线性插值. 二阶贝塞尔曲线 取平面内三个不共线的点,AB:AC=CD:CE,这个时候BD又是一条直线,可以按照一阶的贝塞尔方程来进行线性插值了. P(B)=(1-t)*P0+tP1 ; P(D)=(1-t)P1+tP2  ; P(t)=(1-t)*

  • Android利用贝塞尔曲线绘制动画的示例代码

    目录 彩虹系列 弹簧动画 复杂立体感动画 总结 前面我们花了几篇介绍了贝塞尔曲线的原理和绘制贝塞尔曲线,着实让我们见识到了贝塞尔曲线的美.好奇心驱使我想看看贝塞尔曲线动起来会是什么样?本篇就借由动画驱动贝塞尔曲线绘制看看动起来的贝塞尔曲线什么效果. 彩虹系列 通过动画控制绘制的结束点,就可以让贝塞尔曲线动起来.例如下面的动图展示的效果,看起来像搭了一个滑滑梯一样.实际上就是用7条贝塞尔曲线实现的,我们使用了 Animation 对象的值来控制绘制的结束点,从而实现了对应的动画效果. 具体源码如下

  • Android自定义View绘制贝塞尔曲线实现流程

    目录 前言 二阶贝塞尔曲线 三阶贝塞尔曲线 前言 对于Android开发,实现贝塞尔曲线还是比较方便的,有对应的API供你调用.由于一阶贝塞尔曲线就是一条直线,实际没啥多大用处,因此,下面主要讲解二阶和三阶. 二阶贝塞尔曲线 在Android中,使用quadTo来实现二阶贝塞尔 path.reset() path.moveTo(startX, startY) path.quadTo(currentX, currentY, endX, endY) canvas.drawPath(path, cur

  • iOS贝塞尔曲线画哆啦A梦的代码实例

    看到这张图,是不是觉得挺萌的,那是如何实现的呢?在iOS中有一个类叫UIBezierPath(贝塞尔曲线),这两天研究了一下UIBezierPath和CAShapeLayer,根据别人分享的教程,画了这个萌萌的哆啦A梦. UIBezierPath: UIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC封装.使用此类可以定义常见的圆形.多边形等形状 .我们使用直线.弧(arc)来创建复杂的曲

  • IOS 贝塞尔曲线(UIBezierPath)属性、方法整理

    IOS 贝塞尔曲线详解         开发IOS的朋友都知道IOS 贝塞尔曲线的重要性,由于经常会用到这样的东西,索性抽时间就把相应所有的属性,方法做一个总结. UIBezierPath主要用来绘制矢量图形,它是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装,所以是需要图形上下文的(CGContextRef),所以一般UIBezierPath在drawRect中使用. UIBezierPath的属性介绍: 1.CGPath:将UIBezierPath类转

  • 快速上手IOS UIBezierPath(贝塞尔曲线)

    UIBezierPath主要用来绘制矢量图形,它是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装,所以是需要图形上下文的(CGContextRef),所以一般UIBezierPath在drawRect中使用. 使用方法 UIBezierPath 是对 CGPathRef 的封装.创建矢量图形时,拆解成一或多条线段,拼接起来,每条线段的终点都是下一条线段的起点. 具体地: 1.创建一个 UIBezierPath 对象 2.用 moveToPoint: 设置初

  • ios 贝塞尔曲线切割圆角的方法

    ios 系统框架已经给我们提供了相应的切割圆角的方法, 但是如果在一个见面有很多控件切割的话会出现卡顿和个别不切得现在 /* 创建一个Button */ UIButton * button = [UIButton buttonWithType:(UIButtonTypeSystem)]; [button setFrame:CGRectMake(100, 100, 100, 100)]; [self addSubview:button]; /* 正厂的圆角需求处理方法 */ button.laye

  • Android把商品添加到购物车的动画效果(贝塞尔曲线)

    当我们写商城类的项目的时候,一般都会有加入购物车的功能,加入购物车的时候会有一些抛物线动画,具体代码如下: 实现效果如图: 思路: 确定动画的起终点 在起终点之间使用二次贝塞尔曲线填充起终点之间的点的轨迹 设置属性动画,ValueAnimator插值器,获取中间点的坐标 将执行动画的控件的x.y坐标设为上面得到的中间点坐标 开启属性动画 当动画结束时的操作 难点: PathMeasure的使用 - getLength() - boolean getPosTan(float distance, f

  • Android贝塞尔曲线初步学习第二课 仿QQ未读消息气泡拖拽黏连效果

    上一节初步了解了Android端的贝塞尔曲线,这一节就举个栗子练习一下,仿QQ未读消息气泡,是最经典的练习贝塞尔曲线的东东,效果如下 附上github源码地址:https://github.com/MonkeyMushroom/DragBubbleView 欢迎star~ 大体思路就是画两个圆,一个黏连小球固定在一个点上,一个气泡小球跟随手指的滑动改变坐标.随着两个圆间距越来越大,黏连小球半径越来越小.当间距小于一定值,松开手指气泡小球会恢复原来位置:当间距超过一定值之后,黏连小球消失,气泡小球

  • Android Path绘制贝塞尔曲线实现QQ拖拽泡泡

    这两天学习了使用Path绘制贝塞尔曲线相关,然后自己动手做了一个类似QQ未读消息可拖拽的小气泡,效果图如下: 最终效果图 接下来一步一步的实现整个过程. 基本原理 其实就是使用Path绘制三点的二次方贝塞尔曲线来完成那个妖娆的曲线的.然后根据触摸点不断绘制对应的圆形,根据距离的改变改变原始固定圆形的半径大小.最后就是松手后返回或者爆裂的实现. Path介绍: 顾名思义,就是一个路径的意思,Path里面有很多的方法,本次设计主要用到的相关方法有 moveTo() 移动Path到一个指定的点 qua

随机推荐