【UGUI】如何实现自动滚动文本效果

这篇具有很好参考价值的文章主要介绍了【UGUI】如何实现自动滚动文本效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

       当我们在制作UI使用Text时,如果文本信息过长,有两种处理方式,一种是换行展示,另一种则是滚动展示,下面博主将给大家介绍如何制作自动滚动文本。

       第一步,创建一个Image(GameObject > UI > Image),可以看到出现了一个白色的框框,改变框框的尺寸,以便进行文本信息显示,接着在Image下创建一个Text(GameObject > UI > Iegacy > Text),改变Text的尺寸,长度超出Image尺寸或边界,可以将Image改为半透明,初始化文本信息“Success is the ability to go from one failure to another with no loss of enthusiasm.”,属性根据自己进行设置,如下图所示。

【UGUI】如何实现自动滚动文本效果

【UGUI】如何实现自动滚动文本效果

       第二步,为Image添加组件Mask,效果如上图,再添加组件Scroll Rect,进行设置如下图,将Text拖入,Horizontal是横向滚动,Vertical是纵向滚动,这里我们取消Vertical,Movement Type(下面会进行介绍)设置为Clamped(可拖拽,无弹性)。

【UGUI】如何实现自动滚动文本效果

       属性Movement Type介绍:

               Unrestricted:无限制,可任意拖拽,可超出文本边界。

               Elastic:可拖拽,有弹性,不可超出文本边界。

               Clamped:可拖拽,无弹性,不可超出文本边界。

       第三步,给Image贴代码,新建C#文件,重命名为TextController,双击打开cs文件,代码如下:

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

public class TextController : MonoBehaviour
{
    public ScrollRect rect;
    // Start is called before the first frame update
    void Start()
    {
        rect = gameObject.GetComponent<ScrollRect>();//绑定组件
    }

    // Update is called once per frame
    void Update()
    {
        rect.horizontalNormalizedPosition += 0.08f * Time.deltaTime;//滚动速度
    }
}

       以上,一个简单的自动文本滚动效果就做好了,运行即可。

       下面再给大家介绍下在博主的3d游戏项目案例(金山打字之生死时速)中如何控制滚动效果和玩家打字的速率同步,代码如下:

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

public class TextController : MonoBehaviour
{
    public ScrollRect rect;
    // Start is called before the first frame update
    void Start()
    {
        rect = gameObject.GetComponent<ScrollRect>();
    }

    // Update is called once per frame
    void Update()
    {
        //rect.horizontalNormalizedPosition += 0.08f * Time.deltaTime;
    }
    public void Run()
    {
        rect.horizontalNormalizedPosition += 0.02f;//滚动频率
    }
}

       在原文PlayerController.cs文件中判断是否按下字母函数下加入以下代码实现调用:文章来源地址https://www.toymoban.com/news/detail-424372.html

    if (index >= 9)//当敲第10个字母的时候,开始滚动
    {
       runText.GetComponent<TextController>().Run();//调用函数
    }

到了这里,关于【UGUI】如何实现自动滚动文本效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity UGUI文本内容自适应大小和内容滚动

    要实现UGUI文本内容自适应大小和内容超出一定范围就自动出现滚动条实现滚动,具体需要如下操作。 1、创建Scrooll View组件 只勾选Vertical。 并且在组件子组件Content中创建Vertical Layout Group和Content Size Fitter组件,如下图所示, 然后在Content组件下,创建文本文件,如下图 最后就是

    2024年02月04日
    浏览(41)
  • el-table表格实现自动滚动效果

    table页面的内容如果超出设定的height会出现自动无限滚动的效果,如下所示: 先给el-table一个ref属性 然后获取到这个属性 在mounted阶段执行scrollFun函数,通过setTnterval定时器来实现动态滚动效果,代码如下: 如果出现列表字段过长时,可使用tooltip-effect=“dark” 搭配 show-overf

    2024年02月13日
    浏览(40)
  • Unity 如何实现卡片循环滚动效果

    功能需求如图所示,点击下一个按钮,所有卡片向右滚动,其中最后一张需要变更为最前面的一张,点击上一个按钮,所有卡片向左滚动,最前面的一张需要变更为最后一张,实现循环滚动效果。 最中间的一张表示当前选中项,变更为选中项的滚动过程中,需要逐渐放大到指

    2024年02月03日
    浏览(53)
  • 粘性文本整页滚动效果

    background 相关属性综合运用 position 属性的 sticky 值运用 scroll-behavior 属性运用 scroll-snap-type 属性运用 scroll-snap-align 属性运用 scroll-snap-type 属性说明 设置了在有滚动容器的情形下吸附至吸附点的程度。 scroll-snap-align 属性说明 属性将盒子的吸附位置指定为其吸附区域(作为对齐

    2024年02月07日
    浏览(40)
  • Android——使用ScrollView实现滚动效果,当内容超出屏幕范围时自动滑动显示

    Android——使用ScrollView实现滚动效果,当内容超出屏幕范围时自动滑动显示 ScrollView是Android中常用的布局容器,用于在屏幕空间有限的情况下实现内容的滑动显示。当内容超出屏幕范围时,用户可以通过滑动屏幕来查看更多内容,提供了更好的用户体验。 在Android中,使用Sc

    2024年01月16日
    浏览(46)
  • 如何使用CSS实现一个无限滚动效果(Infinite Scroll)?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月12日
    浏览(51)
  • 如何使用CSS实现一个全屏滚动效果(Fullpage Scroll)?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月11日
    浏览(51)
  • 如何使用CSS实现一个无限循环滚动的图片轮播效果?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月11日
    浏览(48)
  • 如何使用CSS实现一个平滑滚动到页面顶部的效果(回到顶部按钮)?

    前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一

    2024年02月11日
    浏览(48)
  • CSS中如何实现多行文本溢出省略号效果?

    前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一

    2024年02月10日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包