场景转场动画的Canvas实现

废话不说，先上图



图1：转场前



图2：转场中（动画效果此处请看末尾链接）



图3：转场后

看完效果，我们来讲讲原理。

首先我们需要准备一张转场用的图。理论上所有图片都可以作为过渡图使用。

我使用的是一张带有天使翅膀图案的图片作为过渡图。

首先，将过渡图黑白化。

var pixs = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
var data = pixs.data;
var len = data.length;
while(len -= 4){
var r = (data[len] + data[len + 1] + data[len + 2]) / 3;
data[len] = data[len + 1] = data[len + 2] = r;
}
context.putImageData(pixs, 0, 0);
(以上代码纯手写未测试，请注意)

在进行过渡之前，我们必须往屏幕上绘制一些内容，随便画什么都可以。

然后我们开始准备过渡了。

在过渡之前，我们需要定义一些变量。

// 用于保存旧的场景最后一帧
var oldSceneCanvas = document.createElement("canvas");

// 用于指示当前最多可用的不透明度值
var currentOffset = 255;

// 将过渡图绘制在后台canvas上，由于之前我们将它黑白化过，因此这里假定已经在canvas上
var transitionCanvas = ...;
完成上面的操作后，我们将当前可见画布中的内容绘制在 oldSceneCanvas 上。

然后假装正常的把新内容绘制在可见画布上。

之后我们将 oldSceneCanvas 的每个像素和 currentOffset进行比较，如果alpha通道大于currentOffset，则让其等于 currentOffset的值。

将oldSceneCanvas 最后绘制在可见画布上。

开启一个定时器，定时将currentOffset的值减小。动画效果就这么出现了……

最后放上我的实现代码，其中使用了几个其他的东东，你可以根据运行报错进行修改……

(function (window, document, Jyo, undefined) {

Jyo.Transition = function (renderer) {
/// <summary>转场动画</summary>
/// <param name="renderer" type="Jyo.Renderer">渲染器对象</param>

Jyo.Object.call(this);

this.renderer = renderer;

/*
设置过渡用画布
*/
var osCvs = document.createElement("canvas");
var tsCvs = document.createElement("canvas");

// 当前偏移量
this.currentOffset = 255;

// 是否正在执行
this.isRun = false;

// 是否允许更新
this.canUpdate = false;

/*
设置旧场景图画布
*/
this.oldScreenCanvas = new Jyo.Xnb();
this.oldScreenCanvas.object = osCvs;
this.oldScreenContext = osCvs.getContext("2d");
this.oldPixelData = null;

/*
设置过渡图画布
*/
this.transitionCanvas = tsCvs;
this.transitionContext = tsCvs.getContext("2d");

// 过渡Alpha数组
this.transitionAlphaArray = null;
};

Jyo.Transition.prototype = new Jyo.Object({
begin: function (img, time, delay) {
/// <summary>开始转场动画</summary>
/// <param name="img" type="Jyo.Xnb">图像Xnb对象</param>
/// <param name="time" type="Number">总时长(毫秒)</param>
/// <param name="delay" type="Number" optional="true">延迟时长(毫秒)</param>

var _this = this;
var renderer = this.renderer;
var osCvs = this.oldScreenCanvas.object;
var tsCvx = this.transitionCanvas;

this.oldPixelData = null;
this.transitionAlphaArray = null;

this.canUpdate = false;
this.currentOffset = 255;
this.isRun = true;
this.time = time;

// 设置画布大小
osCvs.width = tsCvx.width = renderer.width;
osCvs.height = tsCvx.height = renderer.height;

// 绘制预设图
this.oldScreenContext.drawImage(renderer.canvas, 0, 0);
this.transitionContext.drawImage(img, 0, 0, renderer.width, renderer.height);

/* 预先对过渡图进行灰度计算 */
var pix = this.transitionContext.getImageData(0, 0, renderer.width, renderer.height);
var iD = pix.data;
var i = iD.length;
while ((i -= 4) > 0) {
iD[i + 3] = iD[i] * 0.3 + iD[i + 1] * 0.59 + iD[i + 2] * 0.11;
}
_this.transitionAlphaArray = iD;

if (typeof delay != "undefined") {
setTimeout(function () {
_this.canUpdate = true;
}, delay);
} else {
_this.canUpdate = true;
}

setTimeout(function () {
_this.fireEvent("begin");
}, 0);
},
draw: function () {
/// <summary>绘制过渡动画</summary>

if (!this.isRun) return;

var renderer = this.renderer;

if (this.transitionAlphaArray) {
var osCtx = this.oldScreenContext;
var tArr = this.transitionAlphaArray;
var pix = this.oldPixelData;

if (!pix) {
this.oldPixelData = pix = osCtx.getImageData(0, 0, renderer.width, renderer.height);
}
var iD = pix.data;

var i = iD.length;
while ((i -= 4) > 0) {
if (tArr[i + 3] > this.currentOffset) {
iD[i + 3] = this.currentOffset;
}
}
osCtx.putImageData(pix, 0, 0);
}

renderer.drawImage(this.oldScreenCanvas, 0, 0);
},
update: function (currentTime) {
/// <summary>更新过渡动画</summary>
/// <param name="currentTime" type="Number">当前时间</param>

if (!this.isRun || !this.canUpdate) return;
if (!this.beginTime) {
this.beginTime = currentTime;
return;
}

var timeSpan = currentTime - this.beginTime;
if (timeSpan < this.time) {
this.currentOffset = 255 - (timeSpan / this.time * 255) | 0;
} else {
delete this.beginTime;
this.canUpdate = false;
this.isRun = false;

this.fireEvent("end");
}
}
});

})(window, document, Jyo);

演示地址：https://math3d.xyz/Avg/