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

03-13 阅读 0评论

版本一(requestAnimationFrame)

前言

$web前端之文字逐渐展示、擦除文字效果、requestAnimationFrame,web前端之文字逐渐展示、擦除文字效果、requestAnimationFrame,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,我们,方法,第1张$

（图片来源网络，侵删）

window.requestAnimationFrame()告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

备注：若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用requestAnimationFrame()。requestAnimationFrame()是一次性的。

当你准备更新在屏动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数(即你的回调函数)。回调函数执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命，在大多数浏览器里，当requestAnimationFrame()运行在后台标签页或者隐藏的里时，requestAnimationFrame()会被暂停调用以提升性能和电池寿命。

DOMHighResTimeStamp参数会传入回调方法中，它指示当前被requestAnimationFrame()排序的回调函数被触发的时间。在同一个帧中的多个回调函数，它们每一个都会接受到一个相同的时间戳，即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数，单位为毫秒，最小精度为1ms(1000μs)。

警告：请确保总是使用第一个参数(或其他一些获取当前时间的方法)来计算动画在一帧中的进度，否则动画在高刷新率的屏幕中会运行得更快。请参考下面示例的做法。

requestAnimationFrame(callback);

（图片来源网络，侵删）

html


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

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)


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

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  newP.textContent += str[i], timeStrat);
            timeStrat += timeout;
        }
    });
}
init(30);

版本三(纯css)

html


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

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: '';
    initial-value: 0%;
    inherits: false;
}
@keyframes erase {
    to {
        --p: 100%;
    }
}