//检测边缘
checkMargin: function () {
var self = this;
this.data.forEach(function (item, index) {
if (index % 2 == 0) { // 下标为2的倍数时移动x轴，否则移动y轴
if ( item.x1 + self.randoms[index] < 0)
// 改为正数
self.randoms[index] = -self.randoms[index];
if (item.x1 + self.wx + self.randoms[index] > self.imgWidth )
// 改为负数
self.randoms[index] = -Math.abs(self.randoms[index])
} else {
if (item.y1 + self.randoms[index] < 0)
self.randoms[index] = -self.randoms[index];
if (item.y1 + self.randoms[index] + self.wy > self.imgHeight)
self.randoms[index] = -Math.abs(self.randoms[index])
}
})
}分离和复原
动画的内容的分离和复原就是更新矩形坐标的值，打乱内容只要将data里的坐标加上随机值，而复原就是减去随机值，
//检测边缘
checkMargin: function () {
var self = this;
this.data.forEach(function (item, index) {
if (index % 2 == 0) { // 下标为2的倍数时移动x轴，否则移动y轴
if ( item.x1 + self.randoms[index] < 0)
// 改为正数
self.randoms[index] = -self.randoms[index];
if (item.x1 + self.wx + self.randoms[index] > self.imgWidth )
// 改为负数
self.randoms[index] = -Math.abs(self.randoms[index])
} else {
if (item.y1 + self.randoms[index] < 0)
self.randoms[index] = -self.randoms[index];
if (item.y1 + self.randoms[index] + self.wy > self.imgHeight)
self.randoms[index] = -Math.abs(self.randoms[index])
}
})
}在储存好坐标后就可以去实现平移动画了，移动的过程有一个平滑的过渡，我们可以使用Tween.js的缓动算法，该算法有4个参数分别是当前时间，初始位置，结束位置，动画时间。详细内容可以参考张鑫旭的这篇文章https://www.zhangxinxu.com/wordpress/2016/12/how-use-tween-js-animation-easing/ 。通过Tween.js可以算出每一帧要移动的距离，然后再使用requestAnimationFrame去更新坐标。
blockAnimation: function () {
var flag = 1;
if (this.state) { // 判断是打乱图片还是还原图片
this.update(true)
} else {
flag = -1;
this.update(false);
}
var self = this;
this.startTime = +new Date(); // 获取当前时间 this.state = !this.state;
(function animation() {
var t = +new Date();
if (t >= self.startTime + self.duration) { // 动画结束条件
return false;
}
self.data.forEach(function (item, index) {
if (index % 2 == 0) {
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 + pos, item.y1, self.wx, self.wy, item.x, item.y, self.area, self.area);
