Laya实现一个文字逐字显示的效果

最新推荐文章于 2023-04-13 17:40:07 发布

crazy_yun

最新推荐文章于 2023-04-13 17:40:07 发布

阅读量642

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Laya 小游戏 Ts

本文链接：https://blog.youkuaiyun.com/crazy_yun/article/details/113746562

Ts 同时被 3 个专栏收录

24 篇文章

订阅专栏

Laya

13 篇文章

订阅专栏

小游戏

7 篇文章

订阅专栏

本文档详细介绍了如何使用LayaMax UI创建一个描述视图组件，通过脚本实现文字逐字显示并响应点击切换场景。关键在于使用了`Tween`和`Handler`进行动画和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

脚本：

import { ui } from "../ui/layaMaxUI";
import Event = Laya.Event;
import Scene = Laya.Scene;
import Tween = Laya.Tween;
import Handler = Laya.Handler;

export default class  DescribeView extends ui.Assets.Views.DescribeViewUI {

    private str:string = "        这是一段测试文字，这是一段测试文字，这是一段测试文字，这是一段测试文字，这是一段测试文字，这是一段测试文字，这是一段测试文字，这是一段测试文字，这是一段测试文字。";
    /**读到的位置 */
    private index:number =  0;

    constructor() {
        super();
    }

    onOpened() {
        this.scene.height = Laya.stage.height;
        this.scene.on(Event.CLICK, this, this.onPageClick);
        Laya.timer.loop(100, this, this.onUpdate); // 调整文字显示的速度, 每多少ms出一个字
    }

    private onUpdate() {
        if(this.index >= this.str.length) { // 判读是否已经读完
            Laya.timer.clearAll(this);
            this.openMainScene();
            return;
        }

        // 跳过空格
        while((++this.index < this.str.length) && this.str.charAt(this.index) == ' ') {}
        // 逐个字显示的效果
        this.text.text = (this.str.substr(0, this.index));
    }

    /**打开主页 */
    private openMainScene(): void {
        Tween.to(this.text, {alpha: 0}, 1000, null, Handler.create(this, ()=>{
            Scene.open("Assets/Scenes/MainScene.scene");
        }));
    }

    /**页面点击事件 */
    private onPageClick(): void {
        this.index = this.str.length - 1;
        this.scene.off(Event.CLICK, this, this.onPageClick); // 防止多少次点击
    }
}

页面json信息：

{
    "type": "View",
    "props": {
        "width": 640,
        "runtime": "Views/DescribeView.ts",
        "name": "DescribeView",
        "height": 1386
    },
    "compId": 2,
    "child": [
        {
            "type": "Label",
            "props": {
                "wordWrap": true,
                "width": 453,
                "var": "text",
                "leading": 8,
                "height": 148,
                "fontSize": 33,
                "font": "Microsoft YaHei",
                "color": "#ffffff",
                "centerY": -250,
                "centerX": 0
            },
            "compId": 3
        }
    ],
    "loadList": [],
    "loadList3D": []
}