Unity打字机,使文本自动滚至文本框底部

效果如图所示:

步骤如下:

一、在Canvas——Image下,创建一个ScrollView,注意,这里我为了不让白色Image挡住我的背景图,在这里对ScrollView上的Image的颜色做了修改,将其透明度Alpha改为了1(注意不要改为0,否则就看不到文本了)

二、对ScrollView做如下修改:

三、对Content做如下修改:

四、对Text做如下修改:

 五、打字机脚本如下:

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

namespace MyController
{
    public class DaZiJiController : MonoBehaviour
    {
        public Text m_tweenText;
        [Range(1, 30)]
        public float m_speed = 1.0f;
        public AudioClip m_audio;
        private bool m_canTween = false;
        private string m_totalStr;
        private float m_timeChange = 0.0f;
        public Scrollbar verticalScrollbar;

        void Start()
        {
            BeginTextShow();
        }

        void Update()
        {
            //如果可以开始动画
            if (m_canTween)
            {
                //判断文本是否应该动画结束
                if (m_tweenText.text.Equals(m_totalStr))
                {
                    //结束
                    TextTweenFinsh();
                }
                else
                {
                    //未结束,文字动画
                    m_tweenText.text = m_totalStr.Substring(0, (int)(m_speed * m_timeChange));
                    m_timeChange += Time.deltaTime;
                    StartCoroutine(ScrollBarBottom());
                }
            }
        }

        void LateUpdate()
        {
            if(Input.GetKeyDown(KeyCode.A))
            {
                //TextTweenFinsh();
                m_tweenText.text = "千山鸟飞绝,万径人踪灭,孤舟蓑笠翁,独钓寒江雪。\n千山鸟飞绝,万径人踪灭,孤舟蓑笠翁,独钓寒江雪。\n" +
                    "千山鸟飞绝,万径人踪灭,孤舟蓑笠翁,独钓寒江雪。\n千山鸟飞绝,万径人踪灭,孤舟蓑笠翁,独钓寒江雪。\n千山鸟飞绝,万径人踪灭,孤舟蓑笠翁,独钓寒江雪。\n" +
                    "千山鸟飞绝,万径人踪灭,孤舟蓑笠翁,独钓寒江雪。\n千山鸟飞绝,万径人踪灭,孤舟蓑笠翁,独钓寒江雪。\n千山鸟飞绝,万径人踪灭,孤舟蓑笠翁,独钓寒江雪。\n" +
                    "千山鸟飞绝,万径人踪灭,孤舟蓑笠翁,独钓寒江雪。\n千山鸟飞绝,万径人踪灭,孤舟蓑笠翁,独钓寒江雪。\n千山鸟飞绝,万径人踪灭,孤舟蓑笠翁,独钓寒江雪。\n";
                BeginTextShow();
            }
        }

        void BeginTextShow()
        {
            //事先保存文本
            m_totalStr = m_tweenText.text;
            //清空Unity Text文本内容
            m_tweenText.text = "";
            //变化时间归零
            m_timeChange = 0f;
            //增加音频组件,并且设置要播放的音频
            m_tweenText.gameObject.GetComponent<AudioSource>().clip = m_audio;
            //设置音频循环播放
            m_tweenText.GetComponent<AudioSource>().loop = true;
            m_tweenText.GetComponent<AudioSource>().volume = 0.4f;
            //播放音频
            m_tweenText.GetComponent<AudioSource>().Play();
            //可以开始动画
            m_canTween = true;
        }
        void TextTweenFinsh()
        {
            m_canTween = false;
            m_tweenText.text = m_totalStr;
            m_timeChange = 0.0f;
            m_tweenText.GetComponent<AudioSource>().Stop();
            //DestroyObject(m_tweenText.GetComponent<AudioSource>());
            Debug.Log("触发“打字机结束!”事件");
        }

        IEnumerator ScrollBarBottom()
        {
            yield return null;
            verticalScrollbar.value = 0;
        }
    }
}

Demo下载链接:

链接:https://pan.baidu.com/s/15MijVu99gNqLvfCRIBSevQ
提取码:sk7m

  • 1
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林枫依依

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值