Javascript Girl
  1. Javascript Girl
  3. Accroissement lisse
Intereting Posts
Chrome Autofill / Autocomplete pas de valeur pour le mot de passe Héritage prototypique de Javascript – les descendants se remplacent Alert () et console.log () ne fonctionne pas dans Firefox 26 L'événement OnReady de Highcharts? Javascript: en comparant à null -! == vs! = Obtenez le dernier enregistrement par champ dans Parse.com JS query Les champs personnalisés sur Meteor.users ne sont pas publiés L'image dessinée sur HTML5 Canvas ne s'affiche pas correctement lors de la première charge Désignation des caractères d'une image en javascript JQuery détecte mousedown à l'intérieur d'un élément puis passe en mode souris en dehors de l'élément Contextes et méthodes de communication entre l'action du navigateur, les scripts de fond et les scripts de contenu des extensions chromées? Obtenir la position de la souris par rapport au diagramme circulaire (équation) XMLHttpRequest ne peut pas générer de problème avec ZScaler Comment charger le .run avant le contrôleur Déclarez les variables par programme?

Accroissement lisse

J'ai fait une simple page de démonstration . Il n'a pas d'assouplissement / accélération. J'aimerais faire la même facilitation / accélération que sur kulesh.info (site Web Flash) en utilisant JavaScript. Comment puis je faire ça?

Tous les exemples de saisie en douceur (défilement, traînée) en JavaScript seraient utiles ainsi qu'un algorithme agnostique de langue.

Vous pouvez obtenir le look flash en utilisant une équation d'assouplissement parfois appelée paradoxe de zeno. 

 position += (destination - position) / damping

J'ai modifié votre jsFiddle pour l'utiliser: regardez

Si vous souhaitez que je donne une description plus détaillée du paradoxe de zeno, faites-le moi savoir et je publierai un ici avec une image ou deux.

Je pense que c'est le meilleur que vous pouvez obtenir avec jQuery: [ Demo ] 

 jQuery.fx.interval = 1; // since v1.4.3 var photos = $(".photos"); var scrollLeft = photos[0].scrollLeft; var $el = $(photos[0]); var lastTime = +new Date(); $(window).mousemove(function(event){ var now = +new Date(); var elapsed = now - lastTime; if (dragging && elapsed > 10) { scrollLeft += x - event.clientX; $el.stop().animate({scrollLeft: scrollLeft}, 300, "easeOutCubic"); x = event.clientX; lastTime = +new Date(); } }); $(window).mouseup(function(event){ dragging = false; $el.stop().animate({scrollLeft: scrollLeft}, 500, "easeOutCubic"); });

Notez que la légèreté (légère) possible ne peut pas être corrigée pour le moment, car elle est liée aux performances de rendu d'image des navigateurs modernes. Test – animation linéaire simple, pas d'événements, pas jQuery

Essayez de remplacer cette ligne: 

 photos[0].scrollLeft += x - event.clientX;

Avec ceci ( démo mise à jour ): 

 photos.animate({ scrollLeft : '+=' + (x - event.clientX) }, 12, 'easeOutCirc');

Notez que j'ai cliqué sur jQuery UI pour inclure les options d'assouplissement. En outre, il est très prudent dans la démo jFiddle (à l'aide de Firefox), mais cela ne le fait pas du tout quand je le teste sur mon bureau ou si je regarde cette démo dans Chrome. Idéalement, l'utilisation de la fonction d'assouplissement sans utiliser jQuery animate serait la meilleure. Mais cela devrait vous donner une idée. 

 var dragging = false; var x, startX, startTime, stopTime; var photos = $(".photos"); photos.mousedown(function(event){ dragging = true; startX = x = event.clientX; startTime = new Date(); event.preventDefault(); }); $(window).mousemove(function(event){ if (dragging) { photos[0].scrollLeft += x - event.clientX; stopTime = new Date(); x = event.clientX; } }); $(window).mouseup(function(event){ dragging = false; var left = photos[0].scrollLeft; var dx = (startX - event.clientX); var time = stopTime - startTime; var speed =time/dx; photos.animate({ scrollLeft : (left + dx*time/500), easing :'swing' }, 100/time*1000); });