前幾天在網(wǎng)上看見一個開源庫, 覺得效果看起來很酷, 直接上圖
Paste_Image.png
Paste_Image.png
首先, 這個庫是很簡單的, 但是我們其實是要學(xué)習(xí)這里邊的思路, 先想想,如果是你,該如何實現(xiàn)這種效果呢, 你會設(shè)置哪些參數(shù)呢?
想沒想好也沒關(guān)系,我們先看他是怎么實現(xiàn)的呢?讓我們來看看源碼吧.
庫提供了畫線和圓圈兩個接口, 由于參數(shù)類似, 我們其實通過一個就可以了解了.
func drawDistortedLine(
with definitionPoints: Int,
width: CGFloat, '
numberOfLines: Int,
xRandomness: CGFloat,
yRandomness: CGFloat,
xInfluenceInXAxis: CGFloat,
yInfluenceInXAxis: CGFloat
) -> UIImage
- definitionPoints 我們可以理解為這條線會發(fā)生多少次突變, 數(shù)目越大變化越明顯
- numberOfLines 這個很好理解, 就是線的條數(shù)
- Randomness 這個值就是隨機變化的浮動范圍, 如果你想上下浮動各25, 那么你可以設(shè)置它為 50
- InfluenceInXAxis 這個最后這個值代表隨機浮動的影響力, 默認(rèn)為1, 如果設(shè)置為 0.1, 那么最后的浮動范圍 就是 = 隨機值 * 0.1
看了這幾個參數(shù), 那么我就可以把整個畫圖的流程給大家說一遍了
- 首先得到參數(shù)
- 根據(jù)參數(shù)得到一條線的一些隨機點
2.1. 首先根據(jù) definitionPoints 把 先平分
2.2. 每一個節(jié)點計算隨機浮動
2.3. 再把 浮動值*Influence
2.4. 移動節(jié)點并保存到數(shù)組 - 重復(fù)步驟 2, 得到所有線的點集
- 計算所有點所存在的范圍
- 根據(jù)點畫出所有的線, 然后導(dǎo)出圖片(劃線的時候使用貝塞爾曲線)
結(jié)語
類庫,很簡單,但是讓你去寫卻不一定能很輕松.
我不知道為什么, 在看他的參數(shù)的時候莫名其妙的就想到了 autoLayout, 細(xì)想想, 的確有些地方有些神似, 其實也就是通過多維條件來控制一個數(shù)值, 在 layout 中就是距離, 在這里就是隨機偏移.
這個庫算是給大家沒事開開腦洞罷了. 有興趣去看看源碼~
