用离屏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 = percent/100;
     //利用曲线曲度计算二次贝塞尔曲线上的控制点point
    let point = [
        ( start[ 0 ] + end[ 0 ] ) / 2 - ( start[ 1 ] - end[ 1 ] ) * curv,
        ( start[ 1 ] + end[ 1 ] ) / 2 - ( end[ 0 ] - start[ 0 ] ) * curv
    ];
    let p0 = start;
    let p1 = point;
    let p2 = end;
    let v01 = [p1[0]-p0[0],p1[1]-p0[1]]; //p0p1向量
    let v12 = [p2[0]-p1[0],p2[1]-p1[1]]; //p1p2向量
    //求p0p1上的点Q0
    let q0 = [p0[0]+v01[0]*t,p0[1]+v01[1]*t];
    //求p1p2上的点Q1
    let q1 = [p1[0]+v12[0]*t, p1[1]+v12[1]*t];
    //求向量Q0Q1
    let v = [q1[0]-q0[0],q1[1]-q0[1]];
    //求向量Q0Q1与贝塞尔曲线的交点B，即当前曲线段的终点
    let b = [q0[0] +v[0]*t, q0[1]+v[1]*t ];

    //路径发光特效，只让路径发光，不影响其他图案，加save()restore()方法
    ctx.save();
    ctx.beginPath();
    ctx.shadowColor = '#FFF';
    ctx.shadowBlur = 3;
    ctx.moveTo(start[0],start[1]);//起始点坐标
    ctx.quadraticCurveTo(q0[0],q0[1],b[0],b[1]);

   //路径上的发光小圆球特效
    ctx.lineWidth = 0.5;
    ctx.strokeStyle = '#FFF';
    ctx.stroke();

    ctx.beginPath();
    ctx.fillStyle = "rgba(255,255,255,0.8)";
    ctx.arc(b[0],b[1],4,0,Math.PI*2);
    ctx.fill();
    ctx.restore();
    ctx.closePath();
}

·仿演示神器Prezi转场动画效果

Prezi 这款演示工具最突出的特点之一，应该就在于它独特的转场风格：似乎所有的内容都是写在同一页，选择特定的内容，就会在一条路线上产生移动—聚焦—再放大的效果。

而Prezi最常见的几种运动效果——平移、旋转、缩放也正是canvas提供的基础功能。

如果把所有的内容都绘制在一张巨大的canvas画布上，再根据路线移动、缩放，也能实现类似的效果，但canvas会遇到的问题是，具体内容放大之后，清晰度也会随之下降。放置的内容越多，就越容易模糊。

所以这时，设计多个离屏canvas互相配合，就能很好地解决这个问题。

离屏canvas

离屏canvas无需通过dom操作，就可以把画面绘制出来，在做一些很复杂的动画效果，或是不需要经常改变的场景时，能够提高页面渲染的性能，不会触发页面的重绘、重排，提升用户体验。

本例中使用了一个主离屏canvas来承载页面切换之后的内容，并设计移动效果。

为了保证页面的每一部分在放大后都能保证原有的100%清晰度，就另外又使用了四个宽度为100%的离屏canvas，分别绘制四个页面的具体内容。然后将这四个副离屏canvas绘制在主canvas的不同位置。

如代码所示：一个主要离屏canvas+四个副离屏canvas

//离屏画布初始状态
var mainOffCanvas = document.getElementById('mainOffCanvas');
var ctx_main = mainOffCanvas.getContext('2d');

var offCanvas1 = document.getElementById('offCanvas1');
var ctx1 = offCanvas1.getContext('2d');

var offCanvas2 = document.getElementById('offCanvas2');
var ctx2 = offCanvas2.getContext('2d');

var offCanvas3 = document.getElementById('offCanvas3');
var ctx3 = offCanvas3.getContext('2d');

var offCanvas4 = document.getElementById('offCanvas4');
var ctx4 = offCanvas4.getContext('2d');

ctx_main.drawImage(offCanvas1,0,0,WINDOW_WIDTH,WINDOW_HEIGHT,20,20,WINDOW_WIDTH/2,WINDOW_HEIGHT/2);
ctx_main.drawImage(offCanvas2,0,0,WINDOW_WIDTH,WINDOW_HEIGHT,600,20,WINDOW_WIDTH/2,WINDOW_HEIGHT/2);
ctx_main.drawImage(offCanvas3,0,0,WINDOW_WIDTH,WINDOW_HEIGHT,20,300,WINDOW_WIDTH/2,WINDOW_HEIGHT/2);
ctx_main.drawImage(offCanvas4,0,0,WINDOW_WIDTH,WINDOW_HEIGHT,600,300,WINDOW_WIDTH/2,WINDOW_HEIGHT/2);

接下来，主离屏canvas开始把对应的内容移动到屏幕中央，并进行放大，放大的结果要求：对应的内容，应该正好是真正的副离屏canvas100%绘制时呈现出来的效果。

对应的部分被放大以后，就会发现其中的内容已经变模糊。因为现在我们看到的还是主离屏canvas的内容。

接下来，我们需要做的就是，将绘制着清晰内容的副离屏canvas进行暗中替换， 代替主离屏canvas绘制在页面上。为了让替换操作看起来没有痕迹，需要计算出此时对应内容准确的位置坐标，也就是图中红框左上顶点的坐标值。（根据一开始绘制在主离屏canvas上的坐标，可以在程序初始化之初就能算出。）

已经将canvas替换成功后，再移动真正的副离屏canvas直至在主canvas上的坐标为（0，0），最后我们真正看到的，就是清晰的真正绘制了具体内容的离屏canvas。

后续也可以在具体页面上添加标签链接，回退至主目录，利用同样的缩放+移动方式再无缝切换到下一页面。

每一块离屏canvas都可以随心所欲地呈现想设计的丰富效果，只要它们的拼接是整齐、规则的，那么不同层次的离屏canvas的交互就可以通过简单的坐标计算实现，最终会呈现出更酷炫的视觉效果。

完整代码链接：
https://github.com/yiran8080/git_demo/tree/master/canvas_transition