一个简单的视觉差效果
这两天看到一篇写的很不错的文章视错觉的概述,他讲述了如何用一个简单的视觉差来做出一个看似酷炫的效果。对思维的启发还是很大的。我也模仿着做了一遍。如果有不足的地方,请大家指出一下~
下载地址:git
效果图:(感觉有点像mm豆。。。)
这个效果是由多层view组合而成的,分解下来层次关系如下图:
在视错觉的概述这篇文章中,其实是要多一层的,即把第二层第三层按顺序addSubView
到同一个view上。因为他有一个抖动的效果,如果不需要抖动的效果,我觉得可以简化掉一层view。
- 最下面一层,是几个圆形依次添加到
self.view
上 - 第二层view要与最下面一层的某一个圆形保持大小和位置的一致性,然后将它也添加到
self.view
上。并且将自身的clipsToBounds
设置为YES,他的意思是如果它的subView
超过它的大小的部分不允许显示。这也是关键的地方–只显示第二层这个圆形的frame部分的subView。 - 第三层上添加与最下面一层大小和位置相同的几个圆形,我在每个圆形上加上一个
label
来显示文字,然后将它添加到第二层上面,作为第二层的subView
,它只会显示与二层重叠的地方。 - 通过动态的改变第三层与第二层的相对位置就能实现这个效果啦~
ps:最后有一层button我并没有在图中画出来,无非就是点击按钮来改变二、三层的相对位置。
关于相对位置
在一开始,相对位置是这样的。第三层的frame是(0, 0, self.frame.size.width, self.frame.size.height)];
点击第二个按钮后,我们要改变两者的位置关系