返回顶部
首页 > 资讯 > 精选 >Unity怎么实现老虎机滚动抽奖效果
  • 421
分享到

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

2023-06-14 20:06:57 421人浏览 泡泡鱼
摘要

小编给大家分享一下Unity怎么实现老虎机滚动抽奖效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!直接看下效果图吧:制作思路:设计四张图片,五个点,每个图片同时

小编给大家分享一下Unity怎么实现老虎机滚动抽奖效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

直接看下效果图吧:

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

制作思路:

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

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

场景搭建:

  • 创建Image命名为Bg作为电视框背景;

  • 创建Image命名Mask并添加Mask组件作为电视框内容显示遮罩框;

  • 创建四个Image作为滚动图片;

  • 创建开始抽奖按钮;

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

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

以上是“Unity怎么实现老虎机滚动抽奖效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网精选频道!

--结束END--

本文标题: Unity怎么实现老虎机滚动抽奖效果

本文链接: https://lsjlt.com/news/274833.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Unity怎么实现老虎机滚动抽奖效果
    小编给大家分享一下Unity怎么实现老虎机滚动抽奖效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!直接看下效果图吧:制作思路:设计四张图片,五个点,每个图片同时...
    99+
    2023-06-14
  • Unity实现老虎机滚动抽奖效果的示例代码
    直接看下效果图吧: 制作思路: 设计四张图片,五个点,每个图片同时向下一个点移动,到最后一个就回到0号点,以此循环。 场景搭建: 创建Image命名为Bg作为电视框背...
    99+
    2024-04-02
  • Vue组件实现数字滚动抽奖效果
    本文实例为大家分享了Vue组件实现数字滚动抽奖效果的具体代码,供大家参考,具体内容如下 可调整数字滚动速度,可指定开奖延迟时间,可指定开奖数字,按个人需求自行改动(录了个效果供参考,...
    99+
    2024-04-02
  • python滚动抽奖功能怎么实现
    你可以使用Python的random模块来实现滚动抽奖功能。以下是一个简单的示例代码: import random import t...
    99+
    2024-03-01
    python
  • Android怎么实现老虎机小游戏
    要实现一个老虎机小游戏,你可以按照以下步骤进行操作:1. 创建一个新的Android项目并打开它。2. 在项目的布局文件中添加一个I...
    99+
    2023-08-16
    Android
  • 如何利用css实现一个抽奖动画效果
    这篇文章将为大家详细讲解有关如何利用css实现一个抽奖动画效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。首先我们先来看下最终的运行效果:从效果图我们可以看到,抽奖会自动进行,并显示中奖信息。这个效果基...
    99+
    2023-06-07
  • 原生JS怎样实现九宫格抽奖效果
    小编给大家分享一下原生JS怎样实现九宫格抽奖效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!效果图:代码如下:<!DOCTYPE html> <html>...
    99+
    2024-04-02
  • js如何实现中奖信息无间隙滚动效果
    小编给大家分享一下js如何实现中奖信息无间隙滚动效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!知识要点1.实现原理:通过定时...
    99+
    2024-04-02
  • 怎么用css实现滚动效果
    使用css实现滚动效果的方法:1.通过“overflow”属性设置滚动条使网页元素的内容实现滚动效果,在css中添加样式代码,比如语法样式为:“overflow: scroll;”设置滚动条即可。css通过overflow属性设置滚动条示例...
    99+
    2024-04-02
  • python随机抽奖系统怎么实现
    要实现一个Python随机抽奖系统,可以按照以下步骤进行:1. 导入random模块,用于生成随机数。```pythonimport...
    99+
    2023-08-16
    python
  • Unity实现卡片循环滚动效果的示例详解
    目录简介定义卡片的摆放规则调整卡片的层级关系调整卡片的尺寸大小动态调整位置、层级和大小移动动画按钮事件简介 功能需求如图所示,点击下一个按钮,所有卡片向右滚动,其中最后一张需要变更为...
    99+
    2022-12-09
    Unity卡片循环滚动效果 Unity循环滚动效果 Unity 滚动
  • vue怎么实现虚拟滚动效果
    这篇文章主要讲解了“vue怎么实现虚拟滚动效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue怎么实现虚拟滚动效果”吧!效果图:滚动原理为了理解虚拟滚动...
    99+
    2024-04-02
  • CSS怎么实现视差滚动效果
    这篇文章主要介绍“CSS怎么实现视差滚动效果”,在日常操作中,相信很多人在CSS怎么实现视差滚动效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS怎么实现视差滚动效果”...
    99+
    2024-04-02
  • JavaScript怎么实现长图滚动效果
    小编给大家分享一下JavaScript怎么实现长图滚动效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!JavaScript是什么JavaScript是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器...
    99+
    2023-06-14
  • jquery数字滚动效果怎么实现
    您可以使用jQuery的.animate()方法来实现数字滚动效果。首先,您需要一个HTML元素来显示数字。例如,一个div元素:`...
    99+
    2023-08-09
    jquery
  • CSS怎么实现滚动阴影效果
    这篇文章主要为大家展示了CSS怎么实现滚动阴影效果,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“CSS怎么实现滚动阴影效果”这篇文章吧。css是什么意思css是一种用来表现HTML或XML等文件样...
    99+
    2023-06-06
  • python数字滚动效果怎么实现
    要实现数字滚动效果,可以使用Python的Tkinter库来创建一个简单的窗口应用程序。以下是一个示例代码,演示如何实现数字滚动效果...
    99+
    2024-03-01
    python
  • CSS3中怎么实现滚动条动画效果
    本篇文章给大家分享的是有关CSS3中怎么实现滚动条动画效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。<body>  ...
    99+
    2024-04-02
  • css怎么实现百叶窗滚动效果
    这篇文章主要讲解了“css怎么实现百叶窗滚动效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css怎么实现百叶窗滚动效果”吧!代码如下:<!<...
    99+
    2024-04-02
  • vue怎么实现3D切换滚动效果
    本篇内容介绍了“vue怎么实现3D切换滚动效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!这个是最终的一个效果,点击左右小箭头,实现滚动效...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作