本篇文章為大家展示了使用Canvas怎么實現(xiàn)一個圖片分割效果，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司秉承實現(xiàn)全網(wǎng)價值營銷的理念，以專業(yè)定制企業(yè)官網(wǎng)，網(wǎng)站建設、做網(wǎng)站，小程序定制開發(fā)，網(wǎng)頁設計制作，手機網(wǎng)站開發(fā)，營銷型網(wǎng)站建設幫助傳統(tǒng)企業(yè)實現(xiàn)“互聯(lián)網(wǎng)+”轉型升級專業(yè)定制企業(yè)官網(wǎng),公司注重人才、技術和管理，匯聚了一批優(yōu)秀的互聯(lián)網(wǎng)技術人才,對客戶都以感恩的心態(tài)奉獻自己的專業(yè)和所長。

首先我們要初始化一些變量，比如圖片的寬高，矩形的個數(shù)，剪切的尺寸等，然后再計算每個矩形的坐標，使用一個二重循環(huán)將矩形坐標保存在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;             //水平和垂直方向小矩形個數(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;                //小矩形坐標狀態(tài)，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，那么這個隨機值一定是負數(shù)，需要把隨機值改為正數(shù)，如果大于圖片高度，那么改成負數(shù)即可。由于每個矩形的移動都是在一個方向上移動，所以我這里寫成偶數(shù)位移動x軸，奇數(shù)位移動y軸。

//檢測邊緣
        checkMargin: function () {
            var self = this;
            this.data.forEach(function (item, index) {
                if (index % 2 == 0) {  // 下標為2的倍數(shù)時移動x軸，否則移動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 )
                        // 改為負數(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])
                }
            })
        }

分離和復原

動畫的內(nèi)容的分離和復原就是更新矩形坐標的值，打亂內(nèi)容只要將data里的坐標加上隨機值，而復原就是減去隨機值，

//檢測邊緣
        checkMargin: function () {
            var self = this;
            this.data.forEach(function (item, index) {
                if (index % 2 == 0) {  // 下標為2的倍數(shù)時移動x軸，否則移動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 )
                        // 改為負數(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])
                }
            })
        }

在儲存好坐標后就可以去實現(xiàn)平移動畫了，移動的過程有一個平滑的過渡，我們可以使用Tween.js的緩動算法，該算法有4個參數(shù)分別是當前時間，初始位置，結束位置，動畫時間。詳細內(nèi)容可以參考張鑫旭的這篇文章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);
            })();
        }

到這里就已經(jīng)實現(xiàn)了分離和復原的動畫了

圖片切換

接下來開始處理圖片切換的部分，這里跟輪播圖有點像，輪播圖動畫是將每個圖片位置移動可視窗口寬度的距離，這里也是一樣，只要將坐標加上圖片高度就可以實現(xiàn)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--;  //調(diào)整圖片順序
                    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);
            })()
        }

上述內(nèi)容就是使用Canvas怎么實現(xiàn)一個圖片分割效果，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章標題：使用Canvas怎么實現(xiàn)一個圖片分割效果-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://aaarwkj.com/article12/gopgc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、移動網(wǎng)站建設、網(wǎng)站導航、外貿(mào)網(wǎng)站建設、定制開發(fā)、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)