之前在逛cssdesignawards時發現了一個把圖片內容分割的效果（網址：https://weareludwig.com），大家可以點進去看看，感覺挺炫酷的，於是自己試著實現了一下，效果還不錯。效果可查看https://codepen.io/geeknoble/pen/OQaOVG
分析首先我們可以發現圖片的內容被分成了一個小矩形，並對每個矩形進行了隨機平移。 Canvas的drawImage函數可以將圖片內容裁剪並繪製到Canvas畫布中，所以這個效果主要實現原理就是使用drawImage。主要效果有兩個，一個是圖片內容的打亂和復原，一個是和下張圖片的切換，這兩個效果都可以使用drawImage，只是移動的距離不一樣。整體思路有了那麼就可以去著手實現一下。
初步工作首先我們要初始化一些變量，例如圖片的寬高，矩形的個數，剪切的尺寸等，然後再計算每個矩形的座標，使用一個二重循環將矩形座標保存在data中。每個矩形有個隨機位移，這個位移也需要保存起來，存在randoms中。其中x,y表示canvas畫布的座標，x1,y1表示圖片裁切的座標。
init: function (context, width, height, area, img) { this.context = context; this.img = img; this.imgWidth = img[0].width; //圖片寬高this.imgHeight = img[0 ].height; this.index = 0; //目前圖片序號this.width = width; //畫布寬高this.height = height; this.area = height/12; //小矩形長度this.countX = width / this.area; //水平和垂直方向小矩形個數this.countY = height / this.area; this.wx = this .imgWidth / this.countX; //圖片在小矩形中的寬高this.wy = this.imgHeight / this.countY; this.state = true; //圖片狀態，true表示未分割this.dataFlag = true; //小矩形座標狀態，true表示未加上隨機值this.duration = 1000; //動畫時間this.duration2 = 1500; this. startTime = 0; this.data = []; //小矩形座標資訊this.randoms = []; //位置隨機值//初始化矩形座標var x1 = 0, y1 = 0, x = 0, y = 0; for (var i = 0; i < this.countY; i++) { for (var j = 0; j < this.countX; j++) { context.drawImage(this.img[this.index], x1 , y1, this.wx, this.wy, x, y, this.area, this.area); //儲存矩形座標this.data.push({ x1: x1, y1: y1, x: x, y: y }); //新增隨機值this.randoms.push(random(-this.area, this.area)); x1 += this.wx; x += this.area; } x1 = 0; y1 += this.wy; x = 0; y += this.area; } this.checkMargin(); }偵測邊緣在給矩形添加位移之前我們需要判斷一下位移後的座標是否超過圖片界限，例如在頂部的矩形如果是y軸移動，那麼只能夠向上移，判斷的條件為當前座標加上位移值是否小於0或大於圖片的寬高。如果更新後的座標小於0，那麼這個隨機值一定是負數，需要把隨機值改為正數，如果大於圖片高度，那就改成負數即可。由於每個矩形的移動都是在一個方向上移動，所以我在這裡寫成偶數位移動x軸，奇數位移動y軸。
//偵測邊緣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); } 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裡查看。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。