UGUI实现跑马灯效果

发表于2019-01-15
评论0 4.4k浏览
在游戏中都有系统公告,提示某某玩家做了什么事,或者系统发布一些公告。文字在屏幕上方移动提示。本篇就借助UGUI给大家分享下跑马灯效果的实现。



使用UGUI,text包含了一个Text的组件。 
注意:Text的文本垂直设置设成overflow不换行。

这样在massage的长度会随着text文字的增长而增长,从而不需要固定文本的长度导致文本多长看不到溢出的字。

接下来就是动画部分,让文字循环一定次数播放。这里用到的是HOTween动画,其他动画组件是一样的。
/// <summary>
    /// 播放公告
    /// </summary>
    /// <param name="str">公告内容</param>
    /// <param name="runnum">循环播放次数</param>
    public void RollMessage(string str,int runnum=1)
    {
        if (isRoll)   //判断当前是否有公告在播放,有就把待播放公告插到队列中等待播放。
        {
            Messages message = new Messages() { 
            message=str,
            num=runnum
            };
            messages.Enqueue(message);
            return;
        }
        isRoll = true;
        playNum = runnum;
        messagePanel = GameObject.Instantiate(Resources.Load("Prefabs/WorldMessage")) as GameObject;
        GameObject obj = GameObject.Find("bottomCanvas");
        messagePanel.transform.SetParent(obj.transform,false);
        messageRect = messagePanel.transform.Find("massage").GetComponent<RectTransform>();
        Text text = messageRect.transform.Find("text").GetComponent<Text>();
        text.text = str;
        width = text.preferredWidth;    //获取文字的长度
        messageRect.anchoredPosition = new Vector3(0, 0, 0);  //让文字从在最右边开始移动
        RollAnimation();
    }

注意设置预设中massage的锚点X的值为0;
 /// <summary>
    /// 播放动画
    /// </summary>
    public void RollAnimation()
    {
        HOTween.Init();                                         //HOTween初始化
        TweenParms parms = new TweenParms();                    //定义一个tween参数
        parms.Loops(playNum,LoopType.Restart);			//循环播放
        parms.Prop("localPosition", new Vector3(-width-540,0,0));     //移动距离    开发环境是1080*1920  unity自适应
        parms.Ease(EaseType.Linear);                      //动画播放曲线
        parms.OnComplete(CompleteRoll);             //设置回调函数 
        HOTween.To(messageRect, (width + 540), parms);           //开始播放  
    }
    /// <summary>
    /// 结束播放
    /// </summary>
    private void CompleteRoll()
    {
        Destroy(messagePanel);
        isRoll = false;
        if (messages.Count > 0)				//判断队列中有木有公告,有继续播放
        {
            Messages message=messages.Dequeue();
            RollMessage(message.message, message.num);
        }
    } 
这样就可以了。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引