前几天在网上看见一个开源库, 觉得效果看起来很酷, 直接上图
Paste_Image.png
Paste_Image.png
首先, 这个库是很简单的, 但是我们其实是要学习这里边的思路, 先想想,如果是你,该如何实现这种效果呢, 你会设置哪些参数呢?
想没想好也没关系,我们先看他是怎么实现的呢?让我们来看看源码吧.
库提供了画线和圆圈两个接口, 由于参数类似, 我们其实通过一个就可以了解了.
func drawDistortedLine(
with definitionPoints: Int,
width: CGFloat, '
numberOfLines: Int,
xRandomness: CGFloat,
yRandomness: CGFloat,
xInfluenceInXAxis: CGFloat,
yInfluenceInXAxis: CGFloat
) -> UIImage
- definitionPoints 我们可以理解为这条线会发生多少次突变, 数目越大变化越明显
- numberOfLines 这个很好理解, 就是线的条数
- Randomness 这个值就是随机变化的浮动范围, 如果你想上下浮动各25, 那么你可以设置它为 50
- InfluenceInXAxis 这个最后这个值代表随机浮动的影响力, 默认为1, 如果设置为 0.1, 那么最后的浮动范围 就是 = 随机值 * 0.1
看了这几个参数, 那么我就可以把整个画图的流程给大家说一遍了
- 首先得到参数
- 根据参数得到一条线的一些随机点
2.1. 首先根据 definitionPoints 把 先平分
2.2. 每一个节点计算随机浮动
2.3. 再把 浮动值*Influence
2.4. 移动节点并保存到数组 - 重复步骤 2, 得到所有线的点集
- 计算所有点所存在的范围
- 根据点画出所有的线, 然后导出图片(划线的时候使用贝塞尔曲线)
结语
类库,很简单,但是让你去写却不一定能很轻松.
我不知道为什么, 在看他的参数的时候莫名其妙的就想到了 autoLayout, 细想想, 的确有些地方有些神似, 其实也就是通过多维条件来控制一个数值, 在 layout 中就是距离, 在这里就是随机偏移.
这个库算是给大家没事开开脑洞罢了. 有兴趣去看看源码~
