RequestAnimationFrame与贝塞尔曲线

RequestAnimationFrame绘制动画与基于贝塞尔曲线的动画

RequestAnimationFrame

我们在浏览器页面上做动画的工作时,曾使用一个计时器,使用setTimeout,每隔多少毫秒进行一次改变来实现动画的效果.
所以浏览器厂家决定, “hey, 为什么我们不提供一个API给你, 因为我们可以为你优化一些东西”
因此,这个API可以用于动画,无论是DOM样式改变,还是canvas 或WebGL.

浏览器可以优化将动画并入为一次单独的repaint和reflow流程周期,保持动画的高保真.例如,基于JavaScript的动画与CSS transitions 或 SVG SMIL同步.

此外,如果你在浏览器运行动画循环离开这个浏览器标签(tab)时或最小化, 浏览器不会保持运行动画, 这意味着消耗更少的CPU, GPU, 和内存资源, 从而节省电池电量

如果当前使用 setTimeout 来驱动动画计时,如下所示:
var handle = setTimeout(renderLoop, PERIOD);

你可以将 setTimeout 替换为 requestAnimationFrame,如下所示
var handle = requestAnimationFrame(renderLoop);

一个Polyfill

for(var x = 0,lastTime = 0,vendors =['ms', 'moz', 'webkit', 'o']; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
window.requestAnimationFrame||(window.requestAnimationFrame=function(callback){
    var currTime = new Date().getTime(),timeToCall = Math.max(0, 16 - (currTime - lastTime)),id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall),lastTime = currTime + timeToCall;return id;
});
window.cancelAnimationFrame||(window.cancelAnimationFrame = function(id) {clearTimeout(id);});

上面timeToCall的值会接近16毫秒,这些比较接近60fps(60 frame per second).

原文:http://paulirish.com/2011/requestanimationframe-for-smart-animating/

绘制贝塞尔曲线

贝塞尔曲线(Bézier curve)最初由Paul de Casteljau于1959年运用de Casteljau演算法开发,以稳定数值的方法求出贝塞尔曲线。

贝塞尔曲线于1962,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。

我们在Photoshop上用到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线。

一阶贝塞尔(直线)B(t) = p0 + (p1-p0)*t = p0*(1-t) + p1*t (p0为start point, p1为end point)

二阶贝塞尔 B(t) = Pm(t)*(1-t) + Pn(t)*t = p0*(1-t)*(1-t) + 2*p1*(1-t)*t+ p2*t*t (p0为start point, p2为end point, p1为control point)

三阶贝塞尔JavaScript:

function c_bezier(p0,p1,p2,p3,t){
    return p0*(1-t)*(1-t)*(1-t)+3*p1*t*(1-t)*(1-t)+3*p2*t*t*(1-t)+p3*t*t*t;
}

四阶

五阶

CSS3中transitions中transition-timing-function参数的实现:
ease: Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
ease-in: Equivalent to cubic-bezier(0.42, 0, 1, 1).
ease-out: Equivalent to cubic-bezier(0, 0, 0.58, 1).
ease-in-out: Equivalent to cubic-bezier(0.42, 0, 0.58, 1).

DEMO

Leave a Reply

Your email address will not be published. Required fields are marked *