Arc de toile animée avec accélération

Question

Je dessine une horloge non-traditionnelle dans la toile. L'heure est représentée par une deuxième sonnerie, une seconde main, une minute et une heure. J'utilise webkit/mozRequestAnimationFrame pour dessiner au bon moment. Je voudrais modifier la deuxième sonnerie pour l'animer rapidement (125ms - 250ms) et avec l'accélération Quadratic (au lieu de ce snap redouté).

Tout comme le Raphael JS Horloge anime son deuxième anneau, sauf qu'il utilise différents assouplissement: http://raphaeljs.com/polar-clock.html

JS Fiddle Liens (doit voir dans Chrome, Firefox ou Webkit nuit):

1. Fiddle : http://jsfiddle.net/thecrypticace/qmwJx/

2. plein écran Fiddle: http://jsfiddle.net/thecrypticace/qmwJx/embedded/result/

Toute aide serait grandement appréciée!

Cela se rapproche, mais est toujours très saccadé:

var startValue; 
if (milliseconds < 500) { 
    if (!startValue) startValue = milliseconds; 
    if (milliseconds - startValue <= 125) { 
     animatedSeconds = seconds - 0.5 + Math.easeIn(milliseconds - startValue, startValue, 1000 - startValue, 125)/1000; 
    } else { 
     animatedSeconds = seconds; 
    } 
    drawRing(384, 384, 384, 20, animatedSeconds/60, 3/2 * Math.PI, false); 
} else { 
    drawRing(384, 384, 384, 20, seconds/60, 3/2 * Math.PI, false);   
    startValue = 0; 
} 

Answer 1

Il est une mater de mathématiques:

drawRing(384, 384, 384, 20, seconds/60, 3/2 * Math.PI, false); 

Ceci est la ligne qui dessine le cercle de secondes. Donc, le problème est que dans un moment donné, vous avez quelque chose comme 34/60, 35/60 et ainsi de suite. Cela signifie que votre cercle de secondes est de 60/60, n'utilisant pas les millisecondes, et le dessin chaque seconde. La solution d'assouplissement linéaire: faites cadrer votre seconde de 60 000/60 000 -> 60 secondes par 1000 millisecondes chacune. Et le calcul:

drawRing(384, 384, 384, 20, ((seconds*1000)+milliseconds)/60000, 3/2 * Math.PI, false); 

The In solution Out Quadric ou choisir un these:

Math.easeInOutQuad = function (t, b, c, d) { 
    t /= d/2; 
    if (t < 1) return c/2*t*t + b; 
    t--; 
    return -c/2 * (t*(t-2) - 1) + b; 
}; 

J'optimisé et changé votre code:

//+1 animation happens before the second hand 
//-1 animation happens after the second hand 
animatedSeconds = seconds+1; 
if (milliseconds > 10) { 
    if (!startValue) { startValue = milliseconds; } 
    if (milliseconds - startValue <= 100) { 
     animatedSeconds -= -0.5+ Math.easeInOutQuad(milliseconds - startValue, startValue, 1000 - startValue, 125)/1000; 
    } 
} else { 
    startValue = 0; 
} 
drawRing(384, 384, 384, 20, animatedSeconds/60, 3/2 * Math.PI, false); 

Espérons que c'est ce que vous cherchez pour.