如何使用typed.js使用随机打字速度动画

How to use random typing speed animation using typed.js

本文关键字：速度 动画 随机 何使用 typed js      更新时间：2023-09-26

我使用的是type .js。我正在寻找一个简单的脚本，使动画文本模拟某人输入它。在脚本中，我看到typeSpeed 30我想使动画写作在20-30之间的随机速度，甚至包括动画打字期间的停顿。有没有一种随机化的方法?

$(function(){
    $("#typed").typed({
        strings: ["The text to be animated goes here"],
        typeSpeed: 30, 
        backDelay: 500,
        loop: false,
        loopCount: false,
     });
});

<center> <span id="typed"></span></center>

您可以循环遍历字符串的每个字符并以随机速度对每个字母使用typed()并将结果附加到html元素

var myString = "The text to be animated goes here";
var max = 2500; //max typeSpeed you want
var min = 100;  //min typeSpeed you want
for (i = 0; i < myString.length; i++) {
    $("#typed").append().typed({ //here you have to test to find how to append
        strings: [myString[i]],
        typeSpeed: Math.floor(Math.random() * (max - min)) + min, 
        backDelay: 500,
        loop: false,
        loopCount: false,
     });
}

使用settimeout()代替typed()的工作解决方案

var myString = "The text to be animated goes here";
var max = 200; // arbitrary value to be tested
var min = 0;   
function doSetTimeout(character, delay) {
    setTimeout(function() {
        $("#typed").append(character); 
    }, delay);
}
for (var i = 0; i < myString.length; i++) {
    var delay = Math.floor(Math.random() * (max - min)) + min + (i * max);  //to keep the letter in good order
    doSetTimeout(myString[i], delay);
}
相关文章：