web前端之文字逐渐展示、擦除文字效果、requestAnimationFrame

MENU

• 版本一(requestAnimationFrame)
• 版本二(setTimeout)
• 版本三(纯css)

---

版本一(requestAnimationFrame)

前言

window.requestAnimationFrame()告诉浏览器------你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
备注：若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用requestAnimationFrame()。requestAnimationFrame()是一次性的。
当你准备更新在屏动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数(即你的回调函数)。回调函数执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命，在大多数浏览器里，当requestAnimationFrame()运行在后台标签页或者隐藏的<iframe>里时，requestAnimationFrame()会被暂停调用以提升性能和电池寿命。
DOMHighResTimeStamp参数会传入回调方法中，它指示当前被requestAnimationFrame()排序的回调函数被触发的时间。在同一个帧中的多个回调函数，它们每一个都会接受到一个相同的时间戳，即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数，单位为毫秒，最小精度为1ms(1000μs)。
警告：请确保总是使用第一个参数(或其他一些获取当前时间的方法)来计算动画在一帧中的进度，否则动画在高刷新率的屏幕中会运行得更快。请参考下面示例的做法。
requestAnimationFrame(callback);

---

html

<div id="idBoxRAF">
    不要去强留任何一段关系 即使你很在意 惜我者 我惜之 嫌我者 我弃之 时间识人 落难之心 不经一事 不懂于人 水不试不知深浅 人不交不知好坏 时间是个好东西 验证了人心 见证了人性 不要总担心身边会失去谁 记得问问自己
    谁又害怕失去你
</div>

---

JavaScript

function initRAF() {
    let textEl = document.querySelector("#idBoxRAF"),
        str = textEl.textContent,
        i = 0;

    textEl.textContent = '';

    function initR() {
        if (i >= str.length) return false;

        textEl.textContent += str[i];
        requestAnimationFrame(initR);
        i++;
    }

    initR();
}

initRAF();

---

版本二(setTimeout)

<div id="idBox">
    <p>三百六十行，行行干破防。</p>
    <p>吃得苦中苦，老板开路虎。</p>
    <p>不听老人言，开心好几年。</p>
    <p>明知山有虎，猛敲退堂鼓。</p>
    <p>行而上学，不行退学。</p>
    <p>安得广夏千万间，广厦一千万一间。</p>
    <p>阎王叫我三更死，二更我就抹脖子。</p>
    <p>一寸光阴一寸金，三寸光阴一个鑫。</p>
    <p>风雪压我两三年，两眼一闭就长眠。</p>
    <p>轻舟已过万重山，乌蒙山连着山外山。</p>
    <p>失败是成功之母，可惜成功六亲不认。</p>
</div>

---

JavaScript

function init(timeout = 28) {
    let textEl = document.querySelector("#idBox"),
        pEl = textEl.querySelectorAll("p"),
        timeStrat = 0;

    textEl.textContent = "";

    pEl.forEach((pT, j) => {
        let str = pT.textContent,
            newP = document.createElement('p');

        textEl.appendChild(newP);

        for (let i = 0; i < str.length; i++) {
            setTimeout(() => newP.textContent += str[i], timeStrat);
            timeStrat += timeout;
        }
    });
}

init(30);

---

版本三(纯css)

html

<div class="container">
    <p>
        你只是来体验生命 什么都拥有不了 什么都留不住 不需要证明什么 更没有什么事一定要实现 你能做的就是不断尝试 收获 感受 然后放下 我们来到这世间 只是为了看花怎么开 水怎么流 太阳如何升起 夕阳何时落下
        经历有趣的事情 遇见难忘的人 生活原本就很沉闷 但跑起来就有风了
    </p>

    <p class="eraser">
        <span class="text">
            你只是来体验生命 什么都拥有不了 什么都留不住 不需要证明什么 更没有什么事一定要实现 你能做的就是不断尝试 收获 感受 然后放下 我们来到这世间 只是为了看花怎么开 水怎么流 太阳如何升起 夕阳何时落下
            经历有趣的事情 遇见难忘的人 生活原本就很沉闷 但跑起来就有风了
        </span>
    </p>
</div>

---

style

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #000;
    color: #fff;
}

.container {
    width: 80%;
    margin: 1em auto;
    line-height: 2;
    text-indent: 2em;
    position: relative;
}

.eraser {
    position: absolute;
    inset: 0;
}

.text {
    background: linear-gradient(to right, #0000 var(--p), #000 calc(var(--p) + 30px));
    color: transparent;
    animation: erase 10s linear forwards;
}

@property --p {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

@keyframes erase {
    to {
        --p: 100%;
    }
}