做個炫酷的圖片切換過度效果

首先，今天是520節日。到了520這類為情侶準備的節日，小編都會感到一萬點暴擊……

首先酸一波，搞點事情(蹭波熱度)。

給大家分享一個520特效頁面：看完記得回來為小編點個贊哦！

這是案例

請掃

前言

老規矩，直接上效果。看看是什么樣的效果吧。看完效果我們在去看實現。

另外附上github地址：

https://github.com/Darylxyx/css-collection/tree/master/fragment

本來這個效果是我3年前做的，只是當時是用無數個 div 標簽完成的，性能比較成問題，在移動端完全跑不動。最近心血來潮想學習一個做 CSS 效果很厲害的大神用純 CSS 實現，無奈功力不夠只能放棄，最終選擇用 canvas 來完成了。

準備工作

1.首先準備相同尺寸的圖片若干張，本例中圖片尺寸均為 1920 * 1080(注意：這里的尺寸是原始圖片的尺寸，不是通過 css 顯示在頁面上的尺寸)。為方便之后的使用，將這些圖片加入 HTML 中一隱藏元素里備用。

2.在 HTML 中插入 canvas 畫布，尺寸自定，但必須保證與圖片資源寬高比一致。本例中畫布尺寸為 800 * 450。

3.基礎代碼如下，首先獲取畫布的 context 對象；其次獲取圖片對象；最后通過 drawImage 方法將圖片繪制出來。

實現

相信很多人看完很快就能明白，這是用若干個小的單元組合在一起，每個單元只負責繪制圖片的一小部分，最后拼在一起就成了一張完整的圖片。

那么在具體講解源碼之前，先讓我們來復習一下 canvas 中 drawImage 函數的用法。由于我們需要用到該函數9個參數的情況，參數較多，需要牢記這些參數的意義和參考的對象。

· img：規定要使用的圖像、畫布或視頻

· sx：開始剪切的 x 坐標位置

· sy：開始剪切的 y 坐標位置

· swidth：被剪切圖像的寬度

· sheight：被剪切圖像的高度

· x：在畫布上放置圖像的 x 坐標位置

· y：在畫布上放置圖像的 y 坐標位置

· width：要使用的圖像的寬度

· height：要使用的圖像的高度

我相信即使將上面這些參數羅列出來，在開發的時候還是很容易暈。這里推薦給大家一個小技巧：除去第一個 img 參數以外還有8個參數，其中前4個參數的尺寸參考的對象是原圖，即 1920 * 1080；后4個參數的尺寸參考的對象是畫布，即 800 * 450。

記住這個口訣，在實際編寫的時候就不容易暈了。

分格

分格是要定下在畫布中一個單元的尺寸，最重要的是單元尺寸可以被畫面的兩條邊長所整除，即單元尺寸應為畫面寬高的公約數。公約數不一定是最大公約數或最小公約數，因為過大效果不夠炫，過小性能會有壓力。

以本例畫板 800 * 450 的尺寸為例，我這里選取 25 * 25 為單元尺寸，即整個畫布由 32 * 18 共 576 個單元格組成。分好格之后我們需要先計算一些基本的參數備用。

前三組參數是我們之前定下的，需要注意的，在算第四組行/列數時要清楚：行數 = 畫布高度 / 單元格高度；列數 = 畫面寬度 / 單元格寬度。如果這點搞反了，后面就蒙逼了。最后一組 DW/DH 是放大換算到原圖上的單元格尺寸，用于后面裁切圖片使用。

繪制

循序漸進，我們先繪制最左上角的那個單元格。因為其原圖裁切位置與畫布擺放位置都是 (0, 0)，所以最簡單。

成功了。那現在要繪制第2行，第3列的圖片該怎么寫呢。

這里容易搞混的是：裁剪或擺放的橫坐標為單元格寬度 * 列號，縱坐標為單元格高度 * 行號。

為了方便，封裝一個負責渲染的純凈函數，其不參與邏輯，只會根據傳入的圖片對象及坐標進行繪制。

封裝好渲染方法之后，通過行數和列數的雙重循環把整張圖片渲染出來。

完美~。其實到這一步核心部分就完成了，為什么呢？因為此時這幅圖片已經是由幾百個單元格拼合而成的，大家可以憑借天馬行空的想像賦予其動畫效果。

在分享自己的動畫算法之前，先給大家看下拼錯是什么樣的~

還有點炫酷~

動畫算法

下面分享下我的動畫算法。Demo 里的效果是怎么實現的呢？

由于在畫布的網格上，每個單元格都有行列號(i，j)。我希望能給出一個坐標(i，j)后，從近到遠依次得出坐標周圍所有菱形上的點。具體如下圖，懶得做圖了~

比如坐標為(3，3)

距離為 1 的點有(2，3)、(3，4)、(4，3)、(3，2)共4個；

距離為 2 的點有(1，3)、(2，4)、(3，5)、(4，4)、(5，3)、(4，2)、(3，1)、(2，2)共8個；

........

求出這一系列點的算法也很容易， 因為菱形線上的點與坐標的?行號差值的絕對值 + 列號差值的絕對值 = 距離，具體如下：

該函數用于給定坐標和距離(dst)，求出坐標周圍該距離上的所有點，以數組的形式返回。但是上面的算法少了邊界限制，完整如下：

這樣我們就有了一個計算周圍固定距離上所有點的純凈函數，接下來就開始完成動畫渲染了。

首先編寫一個用于清除單元格內容的清除函數，只需要傳入坐標，就能清除該坐標單元格上的內容，等待之后繪制新的圖案。

anotherImg?為下一張圖，最后通過 setInterval 不斷向外層繪制新的圖片完成碎片式的漸變效果。

當 countAround 返回的數組長度為0，即到坐標點該距離上的所有點都在邊界之外了，就停止定時器循環。至此所有核心代碼已經介紹完畢。

現在給定畫布上任意坐標，就能從該點開始向四周擴散完成碎片式的圖片切換效果。

在自動輪播時，每次從預設好的8個點(四個角及四條邊的中點)開始動畫，8個點坐標如下：

點擊時，則算出點擊所在單元格坐標，從該點開始動畫。

感謝你的瀏覽，希望能有所幫助！！

內容來源：

http://www.cnblogs.com/ghost-xyx/p/7240282.html

咳咳，最后。。。

總結

以上是生活随笔為你收集整理的的图片怎么循环渲染_十分钟教你做个炫酷的图片切换过度效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。