Unity 之 实现老虎机滚动抽奖效果

直接看下效果图吧:
choujiang


制作思路:

设计四张图片,五个点,每个图片同时向下一个点移动,到最后一个就回到0号点,以此循环。

1.2


场景搭建:

  1. 创建Image命名为Bg作为电视框背景;
  2. 创建Image命名Mask并添加Mask组件作为电视框内容显示遮罩框;
  3. 创建四个Image作为滚动图片;
  4. 创建开始抽奖按钮;
    1.3

PS:实际项目中可以根据需求来动态修改图片显示,以达到的控制每次抽奖奖品内容。


源码分享:

using System.Collections;
using UnityEngine;
using UnityEngine.UI;

public class ScollToDraw : MonoBehaviour
{
      // 抽奖按钮
      public Button DrowBtn;
      
      // 奖励图片
      public Image[] ArardImgArr;

      // 转盘速度
      public float AniMoveSpeed = 3f;

      // 进度
      private float[] progress = new[] {0f, 1f, 2f, 3f, 4f};

      // 转动动画位置
      private Vector3[] AniPosV3 = new[]
            {Vector3.up * 240, Vector3.up * 120, Vector3.zero, Vector3.down * 120, Vector3.down * 240};

      // 自动暂停标识
      private bool isAutoStop;
      // 抽奖结束 停止刷新界面UI
      private bool isStopUpdatePos;
      
      void Start()
      {
            DrowBtn.onClick.AddListener(DrawFun);
            isAutoStop = false;
            isStopUpdatePos = false;
      }

      void Update()
      {
            if (isStopUpdatePos) return;
            
            float t = Time.deltaTime * AniMoveSpeed;
            for (int i = 0; i < ArardImgArr.Length; i++)
            {
                  progress[i] += t;
                  ArardImgArr[i].transform.localPosition = MovePosition(i);
            }
      }
      
      // 获取下一个移动到的位置
      Vector3 MovePosition(int i)
      {
            int index = Mathf.FloorToInt(progress[i]);
            if (index > AniPosV3.Length - 2)
            {
                  //保留其小数部分,不能直接赋值为0
                  progress[i] -= index; 
                  index = 0;
                  // 索引为2的到底了,索引为0的就在正中心
                  if (i == 2 && isAutoStop)
                  {
                        isStopUpdatePos = true;
                        Debug.Log("展示奖励界面...");
                        // todo...获取奖励数据维护
                  }
                  return AniPosV3[index];
            }
            else
            {
                  return Vector3.Lerp(AniPosV3[index], AniPosV3[index + 1], progress[i] - index);
            }
      }
      
      /// <summary>
      /// 点击抽奖
      /// </summary>
      void DrawFun()
      {
            isAutoStop = false;
            isStopUpdatePos = false;
            StartCoroutine(SetMoveSpeed(2));
            // DoTween 按钮下拉动画
            // Transform tran = DrowBtn.transform;
            //tran.DOLocalMoveY(-60, 0.2f).OnComplete(() =>
            //{
            //      tran.DOLocalMoveY(50, 0.2f);
            //
            //});
      }
      
      // 抽奖动画速度控制
      IEnumerator SetMoveSpeed(int time)
      {
            AniMoveSpeed = 10;
            yield return new WaitForSeconds(time);
            AniMoveSpeed = 1;
            yield return new WaitForSeconds(time);
            isAutoStop = true;
      }
}


若还有不明白的地方,可以评论咨询,或者点击下面链接查看Demo: Demo链接

没有积分的童鞋,可以点击下方卡片,回复“老虎机”获得项目源码。


更新拓展

横向抽奖

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class LevelRewardPage : MonoBehaviour
{
    public Button Btn_DrawTurn;

    void Start()
    {
        Btn_DrawTurn.onClick.AddListener(OnClickSongHero);
    }

    void OnClickSongHero()
    {
        Btn_DrawTurn.gameObject.SetActive(false);
        // 展示动画
        isAutoStop = false;
        isStopUpdatePos = false;
        DrawFun();
    }

    #region 动画

    // 奖励图片
    public Image[] ArardImgArr;

    // 转盘速度
    public float AniMoveSpeed = 3f;
    
    // 第一段,第二段 转盘时间
    public float FristMoveTime = 3f;
    public float SecondMoveTime = 3f;

    // 进度
    private float[] progress = new[] {0f, 1f, 2f, 3f, 4f, 5f, 6f};

    // 转动动画位置
    private Vector3[] AniPosV3 = new[]
    {
        Vector3.right * 748, Vector3.right * 498, Vector3.right * 253,
        Vector3.right * 8, Vector3.left * 237, Vector3.left * 482, Vector3.left * 727
    };

    // 自动暂停标识
    private bool isAutoStop;

    // 抽奖结束 停止刷新界面UI
    private bool isStopUpdatePos;

    /// <summary>
    /// 点击抽奖
    /// </summary>
    void DrawFun()
    {
        isAutoStop = false;
        isStopUpdatePos = false;
        StartCoroutine(SetMoveSpeed());
    }

    // 抽奖动画速度控制
    IEnumerator SetMoveSpeed()
    {
        // 加速开始
        float time = FristMoveTime;
        AniMoveSpeed = 3;
        while (time > 0)
        {
            time -= 0.02f;
            if (AniMoveSpeed < 10)
                AniMoveSpeed += 0.2f;
            yield return new WaitForFixedUpdate();
            UpTurn();
        }

        // 减速 减时间
        time = SecondMoveTime;
        AniMoveSpeed = 3;
        while (time > 0)
        {
            time -= 0.02f;
            if (AniMoveSpeed > 1)
                AniMoveSpeed -= 0.2f;
            yield return new WaitForFixedUpdate();
            UpTurn();
        }

        // 直到停止
        isAutoStop = true;
        while (!isStopUpdatePos)
        {
            yield return new WaitForFixedUpdate();
            UpTurn();
        }
    }

    void UpTurn()
    {
        float t = Time.deltaTime * AniMoveSpeed;
        for (int i = 0; i < ArardImgArr.Length; i++)
        {
            progress[i] += t;
            ArardImgArr[i].transform.localPosition = MovePosition(i);
        }
    }

    // 获取下一个移动到的位置
    Vector3 MovePosition(int i)
    {
        int index = Mathf.FloorToInt(progress[i]);
        if (index > AniPosV3.Length - 2)
        {
            //保留其小数部分,不能直接赋值为0
            progress[i] -= index;
            index = 0;
            // 索引为5的到底了,索引为0的就在正中心
            if (i == 5 && isAutoStop)
            {
                isStopUpdatePos = true;                
                // todo奖励...
            }

            return AniPosV3[index];
        }
        else
        {
            return Vector3.Lerp(AniPosV3[index], AniPosV3[index + 1], progress[i] - index);
        }
    }

    #endregion
}
Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐