Unity幸运转盘实战项目

幸运转盘主要是由两部分组成——转盘、指针，实现的方式也分两种，转盘动或者指针动，不过两者的原理都是一样的，这里就以指针动做了一个项目级的demo（由于后面的圆盘中间的那条竖线有点往左偏，所以导致那些圣诞老人的显示有些偏移）。< demo 下载 >

 

在项目开发中，一般这个功能的实现过程是：

1、当点击开始的时候，转盘开始动， 同时向服务端发送协议；

2、服务端返回数据（前端计算好对应的角度），当转盘旋转一定时间后开始减速直至对应角度

当然也可以等服务端返回数据后再开始模拟旋转过程，但是由于受网络的影响，这一过程可能会较长，表现效果不是很好。

关于unity的旋转，主要有下面几类接口：transform.rotate(),  transform.rotatearound(),transform.rotation, transform.eulerangles。 其中 rotate() 和 rotatearound() 都是同一类接口（里面的具体重载这里就不细说了），都是指从当前位置做指定角度的偏移，而 rotation 和 eulerangles 都是直接赋值的字段，rotation 是一个四元数类型， eulerangles 则是一个欧拉角。很显然，我们在做旋转的时候不需要关心具体角度，使用 rotate() 类型做定帧偏移是最合适的，通过设置偏移的角度就能实现变速转动，比较适合转盘开始阶段的加速过程和中间的匀速过程，而当我们知道停止的具体角度时，则可已利用差值运算能精准地实现减速过程并最终停到我们需要的位置。但是有一点需要注意，unity里面角度是逆时针计算的，而我们日常生活中一般习惯于顺时针，所以，最终的角度还需要取反一下。废话不多说，见代码：

using unityengine;
using unityengine.ui;
 
public class luckyturntable : monobehaviour
{
 public enum state
 {
  none,  //待机状态
  start,  //加速阶段
  prepared, //等待数据阶段
  end,  //减速阶段
 }
 
 public delegate void onfinishcallback();
 private event onfinishcallback onfinish;
 
 /// <summary>
 /// 设置完成时的回调
 /// </summary>
 /// <param name="onfinish"></param>
 public void setonfinishcallback(onfinishcallback onfinish)
 {
  onfinish += onfinish;
 }
 
 /// <summary>
 /// 最大速度
 /// </summary>
 public int velocity = 3000;
 
 public transform node;
 public button btnstart;
 public button btnstop;
 public button btnrandom;
 public inputfield input;
 
 private state _state;
 /// <summary>
 /// 转盘的状态
 /// </summary>
 public state curstate
 {
  get
  {
   return _state;
  }
  private set
  {
   _state = value;
   switch (value)
   {
    //不同阶段限制各按钮的点击状态
    case state.none:
     btnstart.enabled = true;
     btnstop.enabled = false;
     btnrandom.enabled = false;
     break;
    case state.start:
     btnstart.enabled = false;
     btnstop.enabled = true;
     btnrandom.enabled = true;
     break;
    case state.prepared:
    case state.end:
     btnstart.enabled = false;
     btnstop.enabled = false;
     btnrandom.enabled = false;
     break;
   }
  }
 }
 
 private float _endangle = 0f;
 /// <summary>
 /// 最终停止的角度[0, 360]
 /// </summary>
 public float endangle
 {
  get
  {
   return _endangle;
  }
  set
  {
   _endangle = mathf.abs(value);
   print("end angle: " + value);
   _endangle = _endangle % 360; //将角度限定在[0, 360]这个区间
   _endangle = -_endangle - 360 * 2; //多n圈并取反，圈数能使减速阶段变得更长，显示更自然，逼真
  }
 }
 
 /// <summary>
 /// 加速持续时间
 /// </summary>
 private readonly float acceleatetime = 1f;
 
 /// <summary>
 /// 减速前的最短持续时间
 /// </summary>
 private float _mintime = 3.0f;
 /// <summary>
 /// 角度缓存
 /// </summary>
 private float _tmpangle = 0f;
 /// <summary>
 /// 时间统计
 /// </summary>
 private float _time;
 /// <summary>
 /// 速度变化因子
 /// </summary>
 private float _factor;
 
 private void start()
 {
  curstate = state.none;
  btnstart.onclick.addlistener(onstartclick);
  btnstop.onclick.addlistener(onstopclick);
  btnrandom.onclick.addlistener(onrandomclick);
 }
 
 private void update()
 {
  if (curstate == state.none)
   return;
 
  _time += time.deltatime;
  if (curstate == state.end)
  {
   //通过差值运算实现精准地旋转到指定角度（球型插值无法实现大于360°的计算）
   float k = 2f; //如果嫌减速太慢，可以加个系数修正一下
   _tmpangle = mathf.lerp(_tmpangle, endangle, time.deltatime * k);
 
   //这里只存在一个方向的旋转，所以不存在欧拉角万向节的问题，所以使用欧拉角和四元数直接赋值都是可以的
   node.rotation = quaternion.euler(0, 0, _tmpangle);
   //node.eulerangles = new vector3(0, 0, _tmpangle);
 
   if (1 >= mathf.abs(_tmpangle - endangle))
   {
    curstate = state.none;
    if (null != onfinish)
    {
     onfinish();
     onfinish = null;
    }
   }
  }
  else
  {
   //利用一个速度因子实现变加速的过程
   _factor = _time / acceleatetime;
   _factor = _factor > 1 ? 1 : _factor;
   node.rotate(vector3.back, _factor * velocity * time.deltatime, space.self);
  }
 
  //当收到数据之后并且旋转了一定时间后开始减速
  if (curstate == state.prepared && _time > _mintime)
  {
   curstate = state.end;
   _tmpangle = getcurclockwiseangle();
  }
 }
 
 /// <summary>
 /// 将当前指针的欧拉角转换成顺时针统计角度
 /// </summary>
 /// <returns></returns>
 private float getcurclockwiseangle()
 {
  //由于读取到的值是[0, 180] u [-180, 0]，左边由0至180递增，右边由180转变成-180，然后递增至0，所以需要转相应的转换
  return (-1) * (360 - node.eulerangles.z) % 360;
 }
 
 private void onstartclick()
 {
  curstate = state.start;
  _time = 0;
 }
 
 /// <summary>
 /// 读取输入框中的角度并停止
 /// </summary>
 private void onstopclick()
 {
  try
  {
   endangle = float.parse(input.text);
  }
  catch
  {
   endangle = 0f;
  }
  curstate = state.prepared;
 
 }
 
 /// <summary>
 /// 随机一个角度并停止
 /// </summary>
 private void onrandomclick()
 {
  endangle = unityengine.random.range(0f, 360f);
  curstate = state.prepared;
 }
}

功能代码基本都在上面了，如果想要demo的话可 前往下载 。

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