用离屏canvas制作仿Prezi页面转场动画特效

用离屏canvas制作网站页面特效、仿Prezi转场特效

首屏效果

页面切换转场效果


 

· 首屏圆形循环扩散效果

首屏效果的难点在于圆形循环扩散动画和贝塞尔曲线的绘制。圆形逐渐扩大的动画并不难，关键在于，如何使圆形逐渐变透明以产生层叠效果，利用到的就是context.globalCompositeOperation属性。

ctx.globalCompositeOperation = 'destination-in';
ctx.fillRect(0,0,WINDOW_WIDTH,WINDOW_WIDTH);

destination-in属性值的作用，是让后来绘制的新画面（源图像）变透明，只显示旧画面与新画面重叠的部分，如果在它后面画一个没有实际意义，面积占100%的新画面，就可以制造出只能看到上一刻旧画面的效果。

ctx.fillRect(0,0,WINDOW_WIDTH,WINDOW_WIDTH);这个没有实际意义的矩形，就是充当了所谓的新画面。

在绘制新的圆形之前，要更改属性值为：

ctx.globalCompositeOperation = "source-over";;
move();//绘制圆形的方法

就可以实现新图像与旧图像共存。因此，之所以圆形扩张的过程中，以及到最大之后，有残影留存的效果，是因为时刻都能看到上一刻的旧图像。

实现该效果的另外的一个关键是，要设置全局透明度ctx.globalAlpha = 0.95，透明度不能为1 ，否则画面会变成实心圆形。

初始化函数render()代码如下：

var render = function () {
   
    ctx.globalCompositeOperation = 'destination-in';
    ctx.fillRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
    ctx.globalCompositeOperation = "source-over";
    move();     //绘制圆形                            
    drawCurve(); //绘制轨道曲线
    render_log = window.requestAnimationFrame(render);
};

 

· 贝塞尔曲线轨迹动画

绘制二次贝塞尔曲线，难点在于如何分段绘制出运动轨迹，这里需要了解canvas提供的方法——ctx.quadraticCurveTo的绘制原理。
可以看@hujiulong博主的文章：用canvas绘制一个曲线动画——深入理解贝塞尔曲线 。可以说将贝塞尔曲线的分段绘制讲得非常细致透彻。后续只要为曲线加上shadowBlur等阴影效果，就能开发出各种风格的酷炫感觉了。

以下是程序中分段绘制贝塞尔曲线的方法：

//start:起点向量，end:终点向量，
//curv：由用户决定的曲线曲度（0，1）
//percent：每一时刻曲线绘制的百分比
function drawCurvePath(start,end,curv,percent){
   

    let t