动画帆布弧缓解 [英] Animated canvas arc with easing

问题描述

我画在画布上非传统的环时钟。时间重新由第二环，秒针，分针圈和小时刻度环psented $ P $。我使用的WebKit / mozRequestAnimationFrame在适当的时候进行绘制。我想修改第二环的动画到下一秒快。（125毫秒 - 250毫秒）和二次宽松政策（而不是那个可怕的SNAP）

就像拉斐尔JS时钟动画的第二环，除了它使用不同的宽松：的http：// raphaeljs .COM /极地clock.html

JS链接拨弄（必须在Chrome，Firefox或WebKit每日查看）：

1. 小提琴： http://jsfiddle.net/thecr​​ypticace/qmwJx/




2. 全屏小提琴：
   http://jsfiddle.net/thecr​​ypticace/qmwJx/embedded/result/

任何帮助将非常AP preciated！

这很接近，但仍然是真正的干：

  VAR在startValue;
如果（毫秒＆LT; 500）{
    如果（在startValue！）在startValue =毫秒;
    如果（毫秒 - 在startValue＆LT; = 125）{
        animatedSeconds =秒 -  0.5 + Math.easeIn（毫秒 - 在startValue，在startValue，1000  - 在startValue，125）/ 1000;
    }其他{
        animatedSeconds =秒;
    }
    drawRing（384，384，384，20，animatedSeconds / 60，3/2 * Math.PI，FALSE）;
}其他{
    drawRing（384，384，384，20，秒/ 60，3/2 * Math.PI，FALSE）;
    在startValue = 0;
}
 

解决方案

这是数学的母校：

  drawRing（384，384，384，20，秒/ 60，3/2 * Math.PI，FALSE）;
 

这是它绘制圈秒就行。所以，问题是，在任何给定的时刻，你有类似34/60，35/60等。这意味着你的秒圈是60/60因此不使用毫秒，它绘制每一秒。

线性缓和的解决方案：让你的圈子秒60 000/60 000 - 每个1000毫秒> 60秒。而数学：

  drawRing（384，384，384，20，（（秒* 1000）+毫秒）/ 60000，3/2 * Math.PI，FALSE）;
 

中的二次出溶液或选择其中一个这些：

  Math.easeInOutQuad =功能（T，B，C，D）{
    T / = D / 2;
    如果（T＆LT; 1）返回C / 2 * T * T + B;
    T--;
    返回-c / 2 *（T *（T-2） -  1）+ B;
};
 

和我进行了优化，改变了你的code：

  // + 1动画秒针之前发生
//  - 秒针后1动画时
animatedSeconds =秒+ 1;
如果（毫秒→10）{
    如果（在startValue！）{在startValue =毫秒; }
    如果（毫秒 - 在startValue＆LT; = 100）{
        animatedSeconds  -  = -0.5+ Math.easeInOutQuad（毫秒 - 在startValue，在startValue，1000  - 在startValue，125）/ 1000;
    }
}其他{
    在startValue = 0;
}
drawRing（384，384，384，20，animatedSeconds / 60，3/2 * Math.PI，FALSE）;
 

希望这是你在找什么。

I'm drawing a non-traditional ring-clock in canvas. The time is represented by a second ring, second hand, minute ring, and hour ring. I am using webkit/mozRequestAnimationFrame to draw at the appropriate time. I would like to modify the second ring to animate to the next second quickly (125ms - 250ms) and with Quadratic easing (instead of that dreaded snap).

Much like the Raphael JS Clock animates its second ring, except it uses different easing: http://raphaeljs.com/polar-clock.html

JS Fiddle Links (must view in Chrome, Firefox, or Webkit Nightly):

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

2. Full screen Fiddle: http://jsfiddle.net/thecrypticace/qmwJx/embedded/result/

Any help would be very much appreciated!

This comes close but is still really jerky:

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

解决方案

It is a mater of math:

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

This is the line which is drawing the seconds circle. So the problem is that in any given moment you have something like 34/60, 35/60 and so on. This means your seconds circle is 60/60 thus not using the milliseconds, and drawing it each second.

The linear easing solution: make your seconds circle 60 000 / 60 000 -> 60 seconds by 1000 millisecond each. And the math:

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

The In Out Quadric solution or choose one 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;
};

And I optimized and changed your 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);

Hopefully this is what you are looking for.

这篇关于动画帆布弧缓解的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！