• Unity之使用贝塞尔曲线制作图片轮播

    一、效果图

    1.效果1

    2.效果2

    二、贝塞尔曲线

    关于贝塞尔曲线的学习大家可以看这个文章进行学习https://blog.csdn.net/qq_39162826/article/details/119806754?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165313175716782395391583%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165313175716782395391583&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-119806754-null-null.142^v10^pc_search_result_control_group,157^v4^control&utm_term=unity+%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF&spm=1018.2226.3001.4187

    看了上面的贝塞尔曲线的公式，大家应该能想到unity中的一个函数Lerp吧，我们根据上一个文章来看：

    1. 一阶贝塞尔曲线公式是这样的

    1.    List<Vector3> pointsList=new List<Vector3>() {Vector3.zero,Vector3.one }; 
    2.    
    3.    //一阶贝塞尔
    4.    public Vector3 FirstOrderBezier(float t)
    5.     {
    6.         Vector3 a = pointsList[0];
    7.         Vector3 b = pointsList[1];
    8.         return a + (b - a) * t;
    9.     }

    如果我们使用Lerp来写的话是这样：

    1.     List<Vector3> pointsList=new List<Vector3>() {Vector3.zero,Vector3.one };
    2.    
    3.     //一阶贝塞尔
    4.     public Vector3 FirstOrderBezierLerp(float t) 
    5.     {
    6.         Vector3 a = pointsList[0];
    7.         Vector3 b = pointsList[1];
    8.         return Vector3.Lerp(a,b,t);
    9.     }

    2. 二阶贝塞尔曲线

    1.     List<Vector3> pointsList=new List<Vector3>() {Vector3.zero,Vector3.one, new Vector3(2,2,2)};
    2.  
    3.     //二阶贝塞尔
    4.     public Vector3 SecondOrderBezierLerp(float t)
    5.     {
    6.         Vector3 a = pointsList[0];
    7.         Vector3 b = pointsList[1];
    8.         Vector3 c = pointsList[2];
    9.  
    10.         Vector3 aa = a + (b - a) * t;
    11.         Vector3 bb = b + (c - b) * t;
    12.         return aa + (bb - aa) * t;
    13.     }

    Lerp 

    1.     //二阶贝塞尔
    2.     public Vector3 SecondOrderBezierLerp(float t)
    3.     {
    4.         Vector3 a = pointsList[0];
    5.         Vector3 b = pointsList[1];
    6.         Vector3 c = pointsList[2];
    7.  
    8.         Vector3 aa = Vector3.Lerp(a, b, t);
    9.         Vector3 bb = Vector3.Lerp(b, c, t);
    10.         return Vector3.Lerp(aa, bb, t);
    11.     }

    好的根据这个规律我们写一个n阶贝塞尔曲线

    1.   #region N阶贝塞尔曲线
    2.     public List<Vector3> bezierPointList;
    3.     //存储计算的贝塞尔曲线结果
    4.     List<Vector3> calculateBezierPointList=new List<Vector3>(); 
    5.     public Vector3 NOrderBezierLerp(float t) 
    6.     {
    7.         //点为空或为0
    8.         if (bezierPointList==null|| bezierPointList.Count<=0)
    9.             return Vector3.zero;
    10.  
    11.         //点为1
    12.         if (bezierPointList.Count == 1)
    13.             return bezierPointList[0];
    14.  
    15.         Vector3 result = Vector3.zero; //返回的结果
    16.  
    17.         //列表赋值
    18.         calculateBezierPointList = bezierPointList;
    19.  
    20.         //当列表的值大于等于2时执行
    21.         while (calculateBezierPointList.Count>=2)
    22.         {
    23.             List<Vector3> pointList = new List<Vector3>();
    24.  
    25.             for (int i = 0; i < calculateBezierPointList.Count-1; i++)
    26.             {
    27.                 Vector3 posA = calculateBezierPointList[i];
    28.                 Vector3 posB = calculateBezierPointList[i+1];
    29.                 pointList.Add(Vector3.Lerp(posA, posB,t));
    30.             }
    31.             //将计算好的贝塞尔曲线列表赋值给calculateBezierPointList
    32.             calculateBezierPointList = pointList;
    33.         }
    34.  
    35.         //最终计算后列表中只有1个点
    36.         result = calculateBezierPointList[0]; 
    37.         return result;
    38.     }
    39.     #endregion

     然后我们用LineRenderer组件来测试这个N阶贝塞尔曲线是否管用

    1. using System.Collections;
    2. using System.Collections.Generic;
    3. using UnityEngine;
    4.  
    5. /// <summary>
    6. /// N阶贝塞尔曲线测试
    7. /// </summary>
    8. public class N_OrderBezierLerpTest : MonoBehaviour
    9. {
    10.     LineRenderer line;
    11.  
    12.     void Start()
    13.     {
    14.         line = GetComponent<LineRenderer>();
    15.         line.positionCount = 100;
    16.     }
    17.  
    18.     void Update()
    19.     {
    20.         //实时创建贝塞尔曲线点
    21.         for (int i = 1; i < line.positionCount + 1; i++)
    22.         {
    23.             Vector3 Bezierposition = N_OrderBezierLerp(i * 0.01f);
    24.             line.SetPosition(i - 1, Bezierposition);
    25.         }
    26.     }
    27.  
    28.     #region N阶贝塞尔曲线
    29.     public List<Vector3> bezierPointList;
    30.     //存储计算的贝塞尔曲线结果
    31.     List<Vector3> calculateBezierPointList=new List<Vector3>(); 
    32.     public Vector3 N_OrderBezierLerp(float t) 
    33.     {
    34.         //点为空或为0
    35.         if (bezierPointList==null|| bezierPointList.Count<=0)
    36.             return Vector3.zero;
    37.  
    38.         //点为1
    39.         if (bezierPointList.Count == 1)
    40.             return bezierPointList[0];
    41.  
    42.         Vector3 result = Vector3.zero; //返回的结果
    43.  
    44.         //列表赋值
    45.         calculateBezierPointList = bezierPointList;
    46.  
    47.         //当列表的值大于等于2时执行
    48.         while (calculateBezierPointList.Count>=2)
    49.         {
    50.             List<Vector3> pointList = new List<Vector3>();
    51.  
    52.             for (int i = 0; i < calculateBezierPointList.Count-1; i++)
    53.             {
    54.                 Vector3 posA = calculateBezierPointList[i];
    55.                 Vector3 posB = calculateBezierPointList[i+1];
    56.                 pointList.Add(Vector3.Lerp(posA, posB,t));
    57.             }
    58.             //将计算好的贝塞尔曲线列表赋值给calculateBezierPointList
    59.             calculateBezierPointList = pointList;
    60.         }
    61.  
    62.         //最终计算后列表中只有1个点
    63.         result = calculateBezierPointList[0]; 
    64.         return result;
    65.     }
    66.     #endregion
    67.  
    68.  
    69. }

    场景布局：

     运行程序来看看效果：

    看这样我们就可以随心所欲的创建多种曲线效果了。 

    三、使用贝塞尔曲线制作图片轮播

    1.Bezier.cs

    贝塞尔曲线脚本，里面记录了N阶贝塞尔曲线公式

    1. using System.Collections;
    2. using System.Collections.Generic;
    3. using UnityEngine;
    4.  
    5. /// <summary>
    6. /// 贝塞尔曲线工具脚本
    7. /// </summary>
    8. public class Bezier
    9. {
    10.     //存储计算的贝塞尔曲线结果
    11.     static List<Vector3> calculateBezierPointList = new List<Vector3>();
    12.     /// <summary>
    13.     /// N阶贝塞尔曲线
    14.     /// </summary>
    15.     /// <param name="bezierPointList">贝塞尔曲线列表</param>
    16.     /// <param name="t">t值</param>
    17.     /// <returns></returns>
    18.     public static Vector3 N_OrderBezierLerp(List<Vector3> bezierPointList, float t)
    19.     {
    20.         //点为空或为0
    21.         if (bezierPointList == null || bezierPointList.Count <= 0)
    22.             return Vector3.zero;
    23.  
    24.         //点为1
    25.         if (bezierPointList.Count == 1)
    26.             return bezierPointList[0];
    27.  
    28.         Vector3 result = Vector3.zero; //返回的结果
    29.  
    30.         //列表赋值
    31.         calculateBezierPointList = bezierPointList;
    32.  
    33.         //当列表的值大于等于2时执行
    34.         while (calculateBezierPointList.Count >= 2)
    35.         {
    36.             List<Vector3> pointList = new List<Vector3>();
    37.  
    38.             for (int i = 0; i < calculateBezierPointList.Count - 1; i++)
    39.             {
    40.                 Vector3 posA = calculateBezierPointList[i];
    41.                 Vector3 posB = calculateBezierPointList[i + 1];
    42.                 pointList.Add(Vector3.Lerp(posA, posB, t));
    43.             }
    44.             //将计算好的贝塞尔曲线列表赋值给calculateBezierPointList
    45.             calculateBezierPointList = pointList;
    46.         }
    47.  
    48.         //最终计算后列表中只有1个点
    49.         result = calculateBezierPointList[0];
    50.         return result;
    51.     }
    52. }

    2. item.cs

    此脚本是要挂载在图片上，用于记录当前在曲线的位置

    1. using System.Collections;
    2. using System.Collections.Generic;
    3. using UnityEngine.UI;
    4. using UnityEngine;
    5.  
    6. /// <summary>
    7. /// 图片ietm
    8. /// </summary>
    9. public class Item : MonoBehaviour
    10. {
    11.     float bezierT;
    12.     SpriteRenderer m_Img;
    13.  
    14.     //封装
    15.     public float BezierT { get => bezierT; set => bezierT = value; }
    16.  
    17.     /// <summary>
    18.     /// 修改图片精灵
    19.     /// </summary>
    20.     /// <param name="sprite"></param>
    21.     public void SetImageSprite(Sprite sprite)
    22.     {
    23.         //image为空时初始化
    24.         if (m_Img==null)
    25.             m_Img = transform.GetChild(0).GetComponent<SpriteRenderer>();
    26.  
    27.         m_Img.sprite = sprite;
    28.     }
    29.  
    30. }

    3.BezierController.cs

    此脚本控制物体在曲线的排列，以及鼠标控制拖动等功能

    1. using System.Collections;
    2. using System.Collections.Generic;
    3. using UnityEngine.UI;
    4. using UnityEngine;
    5.  
    6. //贝塞尔曲线控制
    7. public class BezierController : MonoBehaviour
    8. {
    9.     //此处距离最好是0或1 否则速度过快可能导致图片串位
    10.     [Header("首尾消失距离")]
    11.     [Range(0, 0.5f)]
    12.     [SerializeField] float leftDis = 0;
    13.     [Range(0.5f, 1f)]
    14.     [SerializeField] float rightDis = 1;
    15.  
    16.     [Header("控制鼠标拖动物体速度")]
    17.     [SerializeField] float speed = 1;
    18.  
    19.     [Header("物体容器")]
    20.     public Transform content;//容器
    21.  
    22.     LineRenderer line;
    23.  
    24.     [Header("图片精灵列表，贝塞尔曲线点位")]
    25.     public List<Sprite> spriteList;
    26.     public List<Vector3> bezierPointList;
    27.  
    28.     void Start()
    29.     {
    30.         line = GetComponent<LineRenderer>();
    31.         line.positionCount = 100;
    32.  
    33.         //初始化图片布局
    34.         InitItem();
    35.     }
    36.  
    37.     Vector2 oldPos;
    38.     void Update()
    39.     {
    40.         //生成贝塞尔曲线点 LineRender
    41.         Bezier_Creat();
    42.  
    43.         //按下I按键初始化item布局 
    44.         if (Input.GetKey(KeyCode.I))
    45.             InitItem(); //初始化
    46.  
    47.         #region 鼠标拖动控制左右移动
    48.         if (Input.GetMouseButtonDown(0))
    49.         {
    50.             oldPos = Input.mousePosition;
    51.         }
    52.  
    53.         if (Input.GetMouseButton(0))
    54.         {
    55.             Vector2 pos = new Vector2(Input.mousePosition.x - oldPos.x, Input.mousePosition.y - oldPos.y);
    56.             for (int i = 0; i < content.childCount; i++)
    57.             {
    58.                 Item obj = content.GetChild(i).GetComponent<Item>();
    59.                 objMove(pos, obj);
    60.             }
    61.             oldPos = Input.mousePosition;
    62.         }
    63.         #endregion
    64.  
    65.     }
    66.  
    67.     #region 初始化item平均布局
    68.     public void InitItem()
    69.     {
    70.         Debug.Log("初始化");
    71.  
    72.         //计算物体在曲线中的t值（间距）
    73.         float space = Mathf.Abs(rightDis - leftDis) / content.childCount;
    74.         Debug.Log(space);
    75.  
    76.         //循环初始化
    77.         for (int i = 0; i < content.childCount; i++)
    78.         {
    79.             Item obj = content.GetChild(i).GetComponent<Item>();
    80.             obj.BezierT = leftDis + (i * space);
    81.             Vector3 _pos = Bezier.N_OrderBezierLerp(bezierPointList, obj.BezierT);
    82.             obj.transform.position = new Vector3(_pos.x, _pos.y, -1);
    83.             SetImageSprite(1, obj); //修改图片
    84.         }
    85.     }
    86.     #endregion
    87.  
    88.     #region 物体移动
    89.     string valueSt;
    90.     string[] valueArray;
    91.     void objMove(Vector2 pos, Item obj)
    92.     {
    93.         float value = (pos.x * speed * Time.deltaTime) / Screen.width;
    94.         obj.BezierT += value;
    95.  
    96.  
    97.         if (obj.BezierT > rightDis)
    98.         {
    99.             valueSt = obj.BezierT.ToString();
    100.             valueArray = valueSt.Split('.');
    101.             valueSt = "0." + valueArray[valueArray.Length - 1];
    102.             obj.BezierT = float.Parse(valueSt);
    103.         }
    104.  
    105.         if (obj.BezierT <= leftDis)
    106.         {
    107.             valueSt = obj.BezierT.ToString();
    108.             valueArray = valueSt.Split('.');
    109.             valueSt = "0." + valueArray[valueArray.Length - 1];
    110.             obj.BezierT = rightDis - Mathf.Abs(float.Parse(valueSt));
    111.         }
    112.  
    113.  
    114.         if (obj.BezierT >= rightDis)
    115.         {
    116.             int index = pos.x > 0 ? 1 : -1;
    117.             obj.BezierT = leftDis;
    118.             //替换图片
    119.             SetImageSprite(index, obj); //修改图片
    120.         }
    121.  
    122.         Vector3 _pos = Bezier.N_OrderBezierLerp(bezierPointList, obj.BezierT);
    123.         obj.transform.position = new Vector3(_pos.x, _pos.y, -1); 
    124.  
    125.     }
    126.  
    127.     #endregion
    128.  
    129.     #region 图片替换
    130.     int currentIndex = -1;
    131.     /// <summary>
    132.     /// 图片替换
    133.     /// </summary>
    134.     /// <param name="dir">移动方向</param>
    135.     /// <param name="item">要替换的图片物体</param>
    136.     void SetImageSprite(int dir, Item item)
    137.     {
    138.         if (dir > 0)
    139.         {
    140.             currentIndex++;
    141.             //超出图片列表最大值 等于0
    142.             if (currentIndex > spriteList.Count - 1)
    143.                 currentIndex = 0;
    144.         }
    145.  
    146.         if (dir < 0)
    147.         {
    148.             currentIndex--;
    149.             //超出图片列表最小值 等于列表最后一个
    150.             if (currentIndex < 0)
    151.                 currentIndex = spriteList.Count - 1;
    152.         }
    153.  
    154.         //修改item图片
    155.         item.SetImageSprite(spriteList[currentIndex]);
    156.  
    157.     }
    158.     #endregion
    159.  
    160.     #region 生成贝塞尔曲线
    161.     /// <summary>
    162.     /// 生成贝塞尔曲线Line
    163.     /// </summary>
    164.     private void Bezier_Creat()
    165.     {
    166.         for (int i = 1; i < line.positionCount + 1; i++)
    167.         {
    168.             Vector3 Bezierposition = Bezier.N_OrderBezierLerp(bezierPointList, i*0.01f);
    169.             line.SetPosition(i - 1, Bezierposition);
    170.         }
    171.     }
    172.     #endregion
    173.  
    174.  
    175. }

    脚本中我都加了很详细的注释，如果有问题或者不懂的可以在评论交流指正。

    三、原程序包

    版本：2019.4.4f1

    http://链接：https://pan.baidu.com/s/1bwFY80igzlOZQ7QlYx8aHg 提取码：syq1

  • 相关阅读:
    Nginx：http自动跳转到https
    理解ELMo 模型
    基于双级阈值及过零率的语音激活检测（VAD）
    实验四.路由器静态路由的配置
    KyLin离线安装OceanBase
    springboot毕设项目（智慧化工MES）质量管理系统f4i11（java+VUE+Mybatis+Maven+Mysql）
    为什么我认识的机械工程师都抱怨工资低？
    C：strcpy和strncpy的陷阱
    FPGA学习之状态机
    Linux 原子操作CAS与锁实现
  • 原文地址：https://blog.csdn.net/qq_42345116/article/details/124887818