équation d'accélération élastique jQuery
Comment puis-je modifier cette jQuery easing de la fonction de produire un moins exagérée de rebond?
$.easing.easeOutElasticSingleBounce = function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};
Je suis à la recherche pour produire un assouplissement de la fonction qui émule ce:
http://sandbox.scriptiny.com/tinyslider2/
tinyslider2 utilise une fonction similaire qui ressemble à quelque chose comme ceci:
new Function(this.n+'.slide('+(i==1?t+(12*d):t+(4*d))+','+(i==1?(-1*d):(-1*d))+','+(i==1?2:3)+','+a+')')
Mais je n'arrive pas à obtenir ma tête autour de maths aujourd'hui, pour s'adapter à tinyslider2 équation dans le jQuery easing format. Si quelqu'un peut me montrer un exemple, je l'apprécierais beaucoup.
Mise à JOUR
Cette équation est très proche:
$.easing.custom = function (x, t, b, c, d) {
var s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
J'ai juste besoin seulement de la fin de rebondir sans le début de rebond.
source d'informationauteur Devon | 2011-03-25
Vous devez vous connecter pour publier un commentaire.
http://timotheegroleau.com/Flash/experiments/easing_function_generator.htm vous permet de créer visuellement un assouplissement de la fonction. Si vous activez la touche F5/FMX radio bouton en haut à droite, il donne de la sortie en JavaScript.
Sans savoir exactement l'effet que vous voulez, cela devrait vous obtenez assez proche.
Sinon bricoler avec l'assouplissement générateur de fonction et essayer de nouvelles options ou de rechercher des http://commadot.com/jquery/easing.php pour plus de ressources.
jsfiddle
http://jsfiddle.net/XRF6J/
C'était amusant de réponse, j'ai toujours voulu savoir comment ces fonctions d'accélération travaillé.
Avez-vous essayé le plugin jQuery easing?
Il ajoute beaucoup de nouvelles levées (vous pouvez l'essayer sur le site).
Si vous pouvez utiliser la dégradation gracieuse, je vous suggère de jeter un oeil à Les transitions CSS. Il est accéléré par le matériel, et vous pouvez les utiliser prédéfini ou personnalisé (avec une courbe de bézier) les transitions.
Je sais que c'est assez vieux, mais j'avais besoin de faire exactement le même effet et j'ai utilisé une combinaison de deux fonctions d'accélération dans l'INTERFACE utilisateur avec un certain succès.
Un linéaire d'animation pour 95% de la transition à 95% du "temps", puis d'un élastique de l'animation sur le solde de 5% à 5% du temps 'fois' 16 (cela semblait juste à regarder à droite - beaucoup de temps de l'animation de cet effet est consacré à rebondir autour de sorte qu'il doit être beaucoup plus longue).
Tout à fait la solution de contournement, mais je ne pouvais pas créer une courbe de bézier formule et j'ai été déchirant mes cheveux essayer.