Анимированный холст с дугой - PullRequest
Новая
       33

Анимированный холст с дугой

3 голосов
/ 19 сентября 2011

Я рисую нетрадиционные кольцевые часы на холсте. Время представлено вторым звонком, секундной стрелкой, минутным звонком и часовым звонком. Я использую webkit / mozRequestAnimationFrame для рисования в соответствующее время. Я хотел бы изменить второе кольцо для быстрой анимации на следующую секунду (125 мс - 250 мс) и с квадратичным ослаблением (вместо этого страшного щелчка).

Так же, как часы Raphael JS оживляют свое второе кольцо, за исключением того, что они используют другое замедление: http://raphaeljs.com/polar-clock.html

JS Fiddle Links (необходимо просматривать в Chrome, Firefox или Webkit Nightly):

  1. Скрипка: http://jsfiddle.net/thecrypticace/qmwJx/

  2. Полный экран Fiddle: http://jsfiddle.net/thecrypticace/qmwJx/embedded/result/

Любая помощь будет принята с благодарностью!

Это близко, но все еще очень вяло: 

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;
}

1 Ответ

1 голос
/ 19 сентября 2011

Это вопрос математики: 

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

Это линия, которая рисует круг секунд. Так что проблема в том, что в любой момент у вас есть что-то вроде 34/60, 35/60 и так далее. Это означает, что ваш круг секунд равен 60/60, поэтому не использует миллисекунды и рисует его каждую секунду.

Линейное решение для ослабления: заставьте ваши секунды вращаться 60 000/60 000 -> 60 секунд на 1000 миллисекунд каждая. И математика: 

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

Решение In Out Quadric или выберите одно this : 

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;
};

И я оптимизировал и изменил ваш код: 

//+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);

Надеюсь, это то, что вы ищете.

...