本篇文章為大家展示了使用Canvas怎么實(shí)現(xiàn)一個(gè)圖片分割效果,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
成都創(chuàng)新互聯(lián)公司秉承實(shí)現(xiàn)全網(wǎng)價(jià)值營(yíng)銷的理念,以專業(yè)定制企業(yè)官網(wǎng),網(wǎng)站建設(shè)、做網(wǎng)站,小程序定制開發(fā),網(wǎng)頁(yè)設(shè)計(jì)制作,手機(jī)網(wǎng)站開發(fā),營(yíng)銷型網(wǎng)站建設(shè)幫助傳統(tǒng)企業(yè)實(shí)現(xiàn)“互聯(lián)網(wǎng)+”轉(zhuǎn)型升級(jí)專業(yè)定制企業(yè)官網(wǎng),公司注重人才、技術(shù)和管理,匯聚了一批優(yōu)秀的互聯(lián)網(wǎng)技術(shù)人才,對(duì)客戶都以感恩的心態(tài)奉獻(xiàn)自己的專業(yè)和所長(zhǎng)。首先我們要初始化一些變量,比如圖片的寬高,矩形的個(gè)數(shù),剪切的尺寸等,然后再計(jì)算每個(gè)矩形的坐標(biāo),使用一個(gè)二重循環(huán)將矩形坐標(biāo)保存在data中。每個(gè)矩形有個(gè)隨機(jī)位移,這個(gè)位移也需要保存起來,存在randoms中。其中x,y表示canvas畫布的坐標(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; //畫布寬高 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)畫時(shí)間 this.duration2 = 1500; this.startTime = 0; 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(); }
檢測(cè)邊緣
在給矩形添加位移之前我們需要判斷一下位移后的坐標(biāo)是否超過圖片界限,比如在頂部的矩形如果是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),所以我這里寫成偶數(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]) } }) }
分離和復(fù)原
動(dòng)畫的內(nèi)容的分離和復(fù)原就是更新矩形坐標(biāo)的值,打亂內(nèi)容只要將data里的坐標(biāo)加上隨機(jī)值,而復(fù)原就是減去隨機(jī)值,
//檢測(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]) } }) }
在儲(chǔ)存好坐標(biāo)后就可以去實(shí)現(xiàn)平移動(dòng)畫了,移動(dòng)的過程有一個(gè)平滑的過渡,我們可以使用Tween.js的緩動(dòng)算法,該算法有4個(gè)參數(shù)分別是當(dāng)前時(shí)間,初始位置,結(jié)束位置,動(dòng)畫時(shí)間。詳細(xì)內(nèi)容可以參考張?chǎng)涡竦倪@篇文章https://www.zhangxinxu.com/wordpress/2016/12/how-use-tween-js-animation-easing/ 。通過Tween.js可以算出每一幀要移動(dòng)的距離,然后再使用requestAnimationFrame去更新坐標(biāo)。
blockAnimation: function () { var flag = 1; if (this.state) { // 判斷是打亂圖片還是還原圖片 this.update(true) } else { flag = -1; this.update(false); } var self = this; this.startTime = +new Date(); // 獲取當(dāng)前時(shí)間 this.state = !this.state; (function animation() { var t = +new Date(); if (t >= self.startTime + self.duration) { // 動(dòng)畫結(jié)束條件 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); // 計(jì)算出每幀移動(dòng)的距離 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)實(shí)現(xiàn)了分離和復(fù)原的動(dòng)畫了
圖片切換
接下來開始處理圖片切換的部分,這里跟輪播圖有點(diǎn)像,輪播圖動(dòng)畫是將每個(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就不用說了吧)。
//垂直滑動(dòng)動(dòng)畫 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); 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); // 更新當(dāng)前圖片坐標(biāo) self.context.drawImage(self.img[self.index], item.x1, item.y1 + pos, self.wx, self.wy, item.x, item.y, self.area, self.area); // 更新下張圖片坐標(biāo) 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怎么實(shí)現(xiàn)一個(gè)圖片分割效果,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
文章標(biāo)題:使用Canvas怎么實(shí)現(xiàn)一個(gè)圖片分割效果-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)路徑:http://bm7419.com/article12/gopgc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供標(biāo)簽優(yōu)化、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、外貿(mào)網(wǎng)站建設(shè)、定制開發(fā)、網(wǎng)站維護(hù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容