Canvas图片分割效果的实现

} else {
var pos = Math.tween.Expo.easeInOut(t - self.startTime, 0, self.randoms[index] * flag, self.duration);
self.context.drawImage(self.img[self.index], item.x1, item.y1 + pos, self.wx, self.wy, item.x, item.y, self.area, self.area);
}
});
requestAnimationFrame(animation);
})();
}

到这里就已经实现了分离和复原的动画了

图片切换

接下来开始处理图片切换的部分，这里跟轮播图有点像，轮播图动画是将每个图片位置移动可视窗口宽度的距离，这里也是一样，只要将坐标加上图片高度就可以实现y轴上的切换。和轮播图不一样的是，我们这里只有一个canvas标签，在切换时只需要改变当前图和下一张图的坐标，当前图移动距离为y1 + pos，下张图移动距离为y1 + pos – imgHeight（为什么要减imgHeight就不用说了吧）。

//垂直滑动动画
verticalAnimation: function (val) {
if (!this.time2) {
return false;
}
this.checkTime(2);
 var self = this;
val ? val = 1 : val = -1; //判断上滑还是下滑
if ((this.index + val) < 0 || (this.index + val) >= (this.img.length)) { //判断图片序号是否到底
return false;
}
 this.state ? this.update(true) : this.update(false);
this.startTime = +new Date();
 (function animation() {
var t = +new Date();
if (t >= self.startTime + self.duration2) {
val === 1 ? self.index++ : self.index--; //调整图片顺序
self.index < 0 ? self.index = self.img.length - 1 : self.index;
self.index >= self.img.length ? self.index = 0 : self.index;
return false;
}
self.data.forEach(function (item) {
var pos = Math.tween.Cubic.easeInOut(t - self.startTime, 0, (self.imgHeight) * val, self.duration2);
// 更新当前图片坐标
self.context.drawImage(self.img[self.index], item.x1, item.y1 + pos, self.wx, self.wy, item.x, item.y, self.area, self.area);
// 更新下张图片坐标
self.context.drawImage(self.img[self.index + val], item.x1, item.y1 + pos - self.imgHeight * val, self.wx, self.wy, item.x, item.y, self.area, self.area);
 });
requestAnimationFrame(animation);
})()
}

x轴的切换也是同理，现在所有功能都差不多完成了，完整代码可以在codepen里查看。