摘要：總結(jié)我們首先生成每個(gè)矩形的坐標(biāo)，并在坐標(biāo)中加入隨機(jī)值，通過(guò)使用的方法去裁剪圖片內(nèi)容實(shí)現(xiàn)了圖片內(nèi)容分割及復(fù)原的效果，再通過(guò)的緩動(dòng)算法實(shí)現(xiàn)了一個(gè)平滑過(guò)渡的動(dòng)畫(huà)效果。

之前在逛cssdesignawards時(shí)發(fā)現(xiàn)了一個(gè)把圖片內(nèi)容分割的效果（網(wǎng)址：https://weareludwig.com），大家可以點(diǎn)進(jìn)去看看，感覺(jué)挺炫酷的，于是自己試著實(shí)現(xiàn)了一下，效果還不錯(cuò)。效果查看https://codepen.io/geeknoble/...。

首先我們可以發(fā)現(xiàn)圖片的內(nèi)容被分成了一個(gè)個(gè)小矩形，并對(duì)每個(gè)矩形進(jìn)行了隨機(jī)平移。Canvas的drawImage函數(shù)可以對(duì)圖片內(nèi)容進(jìn)行裁剪并繪制到Canvas畫(huà)布中，所以該效果主要實(shí)現(xiàn)原理就是使用drawImage。主要效果有兩個(gè)，一個(gè)是圖片內(nèi)容的打亂和復(fù)原，一個(gè)是和下張圖片的切換，這兩個(gè)效果都可以使用drawImage，只是移動(dòng)的距離不一樣?？傮w思路有了那么就可以去著手實(shí)現(xiàn)一下。

首先我們要初始化一些變量，比如圖片的寬高，矩形的個(gè)數(shù)，剪切的尺寸等，然后再計(jì)算每個(gè)矩形的坐標(biāo)，使用一個(gè)二重循環(huán)將矩形坐標(biāo)保存在data中。每個(gè)矩形有個(gè)隨機(jī)位移，這個(gè)位移也需要保存起來(lái)，存在randoms中。其中x,y表示canvas畫(huà)布的坐標(biāo)，x1,y1表示圖片裁剪的坐標(biāo)。

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;                       //當(dāng)前圖片序號(hào)
            this.width = width;                  //畫(huà)布寬高
            this.height = height;
            this.area = height/12;                     //小矩形長(zhǎng)度
            this.countX = width / this.area;             //水平和垂直方向小矩形個(gè)數(shù)
            this.countY = height / this.area;
            this.wx = this.imgWidth / this.countX;      //圖片在小矩形中的寬高
            this.wy = this.imgHeight / this.countY;
            this.state = true;                   //圖片狀態(tài)，true表示未拆分
            this.dataFlag = true;                //小矩形坐標(biāo)狀態(tài)，true表示未加上隨機(jī)值
            this.duration = 1000;                 //動(dòng)畫(huà)時(shí)間
            this.duration2 = 1500;
            this.data = [];                       //小矩形坐標(biāo)信息
            this.randoms = [];                    //位置隨機(jī)值
            //初始化矩形坐標(biāo)
            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);
                    //儲(chǔ)存矩形坐標(biāo)
                    this.data.push({
                        x1: x1,
                        y1: y1,
                        x: x,
                        y: y
                    });
                    //添加隨機(jī)值
                    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();
        }

在給矩形添加位移之前我們需要判斷一下位移后的坐標(biāo)是否超過(guò)圖片界限，比如在頂部的矩形如果是y軸移動(dòng)，那么只能夠向上移，判斷的條件為當(dāng)前坐標(biāo)加上位移值是否小于0或大于圖片的寬高。如果更新后的坐標(biāo)小于0，那么這個(gè)隨機(jī)值一定是負(fù)數(shù)，需要把隨機(jī)值改為正數(shù)，如果大于圖片高度，那么改成負(fù)數(shù)即可。由于每個(gè)矩形的移動(dòng)都是在一個(gè)方向上移動(dòng)，所以我這里寫(xiě)成偶數(shù)位移動(dòng)x軸，奇數(shù)位移動(dòng)y軸。

//檢測(cè)邊緣
        checkMargin: function () {
            var self = this;
            this.data.forEach(function (item, index) {
                if (index % 2 == 0) {  // 下標(biāo)為2的倍數(shù)時(shí)移動(dòng)x軸，否則移動(dòng)y軸
                    if ( item.x1 + self.randoms[index] < 0)
                        // 改為正數(shù)
                        self.randoms[index] = -self.randoms[index];
                    if (item.x1 + self.wx + self.randoms[index] > self.imgWidth )
                        // 改為負(fù)數(shù)
                        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])
                }
            })
        }

動(dòng)畫(huà)的內(nèi)容的分離和復(fù)原就是更新矩形坐標(biāo)的值，打亂內(nèi)容只要將data里的坐標(biāo)加上隨機(jī)值，而復(fù)原就是減去隨機(jī)值，

//調(diào)整矩形坐標(biāo)
        update: function (val) {
            var self = this;

            if (val) {          //還原坐標(biāo)
                if (!this.dataFlag) {
                    this.data.forEach(function (item, index) {
                        if (index % 2 == 0) {
                            item.x1 -= self.randoms[index];
                        } else {
                            item.y1 -= self.randoms[index];
                        }
                    })
                }
                this.dataFlag = true;
            } else {      //打亂坐標(biāo)
                if (this.dataFlag) {
                    this.data.forEach(function (item, index) {
                        if (index % 2 == 0) {
                            item.x1 += self.randoms[index];
                        } else {
                            item.y1 += self.randoms[index];
                        }
                    })
                }
                this.dataFlag = false;
            }
        }

在儲(chǔ)存好坐標(biāo)后就可以去實(shí)現(xiàn)平移動(dòng)畫(huà)了，移動(dòng)的過(guò)程有一個(gè)平滑的過(guò)渡，一般的過(guò)渡可以使用CSS3，但Canvas里不能使用CSS，Canvas繪制動(dòng)畫(huà)時(shí)需要一幀一幀的去操作。我們可以使用Tween.js的緩動(dòng)算法，它可以計(jì)算出每一幀要移動(dòng)的值，并且有許多不同的速度曲線。它的部分源碼如下

var Tween = {
        Cubic: {
            easeIn: function(t, b, c, d) {
                return c * (t /= d) * t * t + b;
            },
            easeOut: function(t, b, c, d) {
                return c * ((t = t/d - 1) * t * t + 1) + b;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) return c / 2 * t * t*t + b;
                return c / 2*((t -= 2) * t * t + 2) + b;
            }
        },

        Expo: {
            easeIn: function(t, b, c, d) {
                return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
            },
            easeOut: function(t, b, c, d) {
                return (t==d) ? b + c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
            },
            easeInOut: function(t, b, c, d) {
                if (t==0) return b;
                if (t==d) return b+c;
                if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
                return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
            }
        }
    }

該算法有4個(gè)參數(shù)分別是當(dāng)前時(shí)間，初始位置，結(jié)束位置，動(dòng)畫(huà)時(shí)間，直接使用這四個(gè)參數(shù)不太好用，我們可以把它簡(jiǎn)單封裝一下

/*
* from 起始位置
* to 終點(diǎn)位置
* duration 動(dòng)畫(huà)時(shí)間
* easing 速度曲線
* callback 每幀的回調(diào)函數(shù)
*/
Math.animation = function(from, to, duration, easing, callback) {
        var startTime = +new Date();
        var arrTween = easing.split(".");
        var tween = Math.tween[arrTween[0]][arrTween[1]];
        (function animation(){
            var t = +new Date();
            if (t < startTime + duration) {  
                var pos = tween(t - startTime, from, to, duration);
                callback(pos, false)
                requestAnimationFrame(animation)
            } else {
                callback(pos, true)
            }
        })()
    }

封裝好動(dòng)畫(huà)后再使用這個(gè)函數(shù)去更新每個(gè)矩形的坐標(biāo)。

blockAnimation: function () {
            var flag = 1;
            if (this.state) {  // 判斷是打亂圖片還是還原圖片
                this.update(true)
            } else {
                flag = -1;
                this.update(false);
            }
            var self = this;
        
            this.state = !this.state;
            self.data.forEach(function (item, index) {
                if (index % 2 == 0) {
                    Math.animation(0, self.randoms[index] * flag, self.duration, "Expo.easeInOut", function(pos) {
                        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 {
                    Math.animation(0, self.randoms[index] * flag, self.duration, "Expo.easeInOut", function(pos) {
                        self.context.drawImage(self.img[self.index], item.x1, item.y1 + pos, self.wx, self.wy, item.x, item.y, self.area, self.area);
                    })
                }
            })
        }

到這里就已經(jīng)實(shí)現(xiàn)了分離和復(fù)原的動(dòng)畫(huà)了

接下來(lái)開(kāi)始處理圖片切換的部分，這里跟輪播圖有點(diǎn)像，輪播圖動(dòng)畫(huà)是將每個(gè)圖片位置移動(dòng)可視窗口寬度的距離，這里也是一樣，只要將坐標(biāo)加上圖片高度就可以實(shí)現(xiàn)y軸上的切換。和輪播圖不一樣的是，我們這里只有一個(gè)canvas標(biāo)簽，在切換時(shí)只需要改變當(dāng)前圖和下一張圖的坐標(biāo)，當(dāng)前圖移動(dòng)距離為y1 + pos，下張圖移動(dòng)距離為y1 + pos - imgHeight（為什么要減imgHeight就不用說(shuō)了吧）。

//垂直滑動(dòng)動(dòng)畫(huà)
        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)) {   //判斷圖片序號(hào)是否到底
                return false;
            }

            this.state ? this.update(true) : this.update(false);
            Math.animation(0, (self.imgHeight) * val, self.duration2, "Cubic.easeInOut", function(pos, isEnd) {
                if (isEnd) {
                    val === 1 ? self.index++ : self.index--;  //調(diào)整圖片順序
                    self.index < 0 ? self.index = self.img.length - 1 : self.index;
                    self.index >= self.img.length ? self.index = 0 : self.index;
                    return
                }
                self.data.forEach(function (item) {
                    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);
                })
            })
        }

x軸的切換也是同理，現(xiàn)在所有功能都差不多完成了，完整代碼可以在codepen里查看。

我們首先生成每個(gè)矩形的坐標(biāo)，并在坐標(biāo)中加入隨機(jī)值，通過(guò)使用Canvas的drawImage方法去裁剪圖片內(nèi)容實(shí)現(xiàn)了圖片內(nèi)容分割及復(fù)原的效果，再通過(guò)Tween的緩動(dòng)算法實(shí)現(xiàn)了一個(gè)平滑過(guò)渡的動(dòng)畫(huà)效果。