預覽效果
算法
實現思路微信
假設一張圖，按照 row 行 col 列分紅 count(=row * col) 份，由 count 份碎片組成，每一個碎片有本身特定的形狀，把全部碎片都拼接在一塊兒，組成完整的拼圖，就完成了一張圖的拼接內容。
佈局
其中每一個碎片，使用特定形狀的遮照，擋住背景，實現部分顯示效果。動畫
碎片的遮照spa
碎片考慮到是特殊形狀，我這個實現方式，有個要求，就是碎片四周凸起的高度，都要是同樣的，沒有凸起的位置，使用透明邊補充起來，這樣是爲了方便計算位置，算法也通用，只要給出幾行幾列，背景圖的大小，就均可以使用這種方法。
.net
好比上圖，上下左右四個方向的紅色箭頭所標記的寬度，須要保持同樣，這樣的話，算上透明邊，每張遮照圖都是等寬高的圖了，至於凸起或者凹陷的部分，根據須要去調整就行，只要保證凸起和凹陷的高度一致便可。blog
碎片的顯示get
有了上一步的碎片遮照，就只須要使用 Mask 來控制顯示背景圖的位置便可，好比本demo 中的背景圖，若是須要顯示左上角的那個碎片，適當移動背景圖的位置，就能像下圖這樣進行顯示。
源碼
打開背景遮照的效果，就是想要顯示的碎片區域了，以下圖綠色區域。io
以上，就是每一張碎片的實現方式了。
總體佈局
根據碎片的顯示大小，背景擁有碎片數量，計算每個碎片對應的座標位置，便可計算出碎片應該在座標點，好比本 demo 中，紅線相交的位置，就是碎片的位置。
吸附效果實現
鬆開鼠標之後，遍歷碎片可能在的全部位置，選擇一個離拖動碎片距離最近的點，經過 moveTo 移動到對應座標點，便可實現吸附效果，操做過程當中，注意父節點的變化以及座標點的變換，若是沒有計算對，就可能會出現閃爍的效果。
碎片容器實現
根據當前碎片在容器內的大小，計算出碎片加入或移出容器，所在的位置。
加入時，加入位置後的全部節點日後移動一個碎片的位置。
移出時，移出位置後的全部節點，須要往前移動一個碎片的位置。
這樣就實現了容器內，添加、移出碎片的動畫效果了。
獲取源碼
關注公衆號，發送【拼圖】，獲取 demo 的源碼 ！！！
若是以爲有用，歡迎關注公衆號，分享更多的人 ！！！
本文分享自微信公衆號 - 一枚小工（caizj_cn）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。