Accélérer le nombre le plus proche qu'il atteint son maximum

Question

J'essaie de simuler la vitesse d'une barre de progression. La barre de progression affiche la progression actuelle en pourcentages (0-100). Ce que j'essaye de réaliser est une fonction/modificateur qui prend modifiera la progression réelle, pour l'avoir lent au début et plus vite vers la fin (comme il atteint 100%)

Ainsi par exemple, si le réel le progrès est de 5% disons que notre modificateur le modifierait à 6%, et quand le progrès atteint 20%, disons que notre modificateur le modifie à 35% et à 60% notre modificateur rapporte 80% ... jusqu'à 100

Ainsi, la modification de peine au début, mais en constante augmentation de la vitesse vers la fin ...

Je ne sais pas comment aborder cela, je ne peux pas tween parce que je n'ai pas un laps de temps je peux interpoler contre. J'imagine que je devrais appliquer une fonction mathématique qui modifierait la valeur sur le pouce. Ce qui suit ne fonctionne pas, mais je l'ajouter ici juste pour illustrer mon point:

console.clear() 
 
let updated = 0; 
 
for(i=0; i <= 100; i++){ 
 
\t updated = (1 - Math.pow(i/101,2)) 
 
\t console.log(i + updated) 
 
}

Je vous remercie toutes les directions sur la façon d'aborder ce sujet. Merci

Answer 1

Voici deux wa ys.

var i = 0; 
 
setInterval(function() { 
 
    if (i <= 100) { 
 
    updated = i * (Math.log10(i)/2); 
 
    
 
    document.getElementById("bar1").style.width = i + "%"; 
 
    
 
    document.getElementById("bar2").style.width = (i * (Math.log10(i)/2)) + "%"; 
 
    
 
    document.getElementById("bar3").style.width = (i * i * i/10000) + "%"; 
 
    i++; 
 
} 
 
}, 50)

.container { 
 
    background: #ccc; 
 
    width: 50vw; 
 
} 
 

 
.bar { 
 
    background: #faa; 
 
    height: 1em; 
 
    width: 0%; 
 
    border-top: thin solid #ccc; 
 
}

<div class="container"> 
 
    <div id="bar1" class="bar">Linear</div> 
 
    <div id="bar2" class="bar"></div> 
 
    <div id="bar3" class="bar"></div> 
 
</div>

Answer 2

Les fonctions d'interpolation sont plus faciles si vous vous déplacez entre les valeurs 0.0 et 1.0. Cela permettra un code similaire à votre.

Par exemple:

for (let i = 0; i <= 1; i += .1) { 
    console.log((i ** 2 *100).toFixed(2)) 
} 

Accélère assez rapidement. Depuis 0 ** n est toujours 0 et 1 ** n est alway 1 vous pouvez librement choisir les exposants pour changer votre vitesse tout en conservant des valeurs comprises entre 0 et 1.:

0,00 1,00 4,00 9,00 16,00 25,00 36,00 49,00 64,00 81,00 100,00

Answer 3

Supposons que vous avez un ffunction et vous avez un temps de répétition t en millisecondes, est, la barre de progression fera une étape sur chaque t. Vous pouvez travailler comme ceci:

var intervalID = setTimeout(f, t); 

Maintenant, nous devons penser à la façon dont f ressemble. Si nous voulons que la barre de progression soit lente au début, mais plus rapide à la fin, alors nous avons besoin d'une fonction qui augmente de façon monotone d'une manière plus raide qu'une fonction linéaire.Une complexité linéaire ressemble à ceci:

l(x) = aX + b 

Son dérivé est

l'(x) = a 

qui est une constante. Nous avons besoin d'une fonction qui augmente plus vite. Regardons cette fonction:

f(x) = x^2 

f'(x) = 2x 

Donc, ce sera bon pour vous

function f() { 
    var result = x * x; 
    //Set progress bar to Math.min(result, 100) 
    if (result >= 100) clearInterval(intervalID); 
}