这次开始,做一些好玩的效果
看一下折叠图片的效果
制作思路
1.如何制作图片折叠效果?
把上面的狗子图片分成两部分显示,上面一部分,下面一部分,折叠上面部分的内容。
2.如何把一张图片分成两部分显示。
搞两个控件,一个显示上半部分,一个显示下半部分,需要用到Layer(图层)的一个属性
contentsRect
,这个属性是可以控制图片显示的尺寸,可以让图片只显示上部分或者下部分,注意:取值范围是0~1
.CGRectMake(0, 0, 1, 0.5)
: 表示显示上半部分CGRectMake(0, 0.5, 1, 0.5)
: 表示显示下半部分如下图,我在storyBoard中拖入的控件,dragView在最底层,尺寸为400x400, topView和bottomView尺寸一样,为200x200,完全重合。为什么这样布局?请往下看
3.如何快速的把两部分拼接成一张完整的图片。
3.1 首先了解折叠,折叠其实就是旋转,既然需要旋转就需要明确锚点,因为默认都是绕着锚点旋转的。
3.2 上部分内容绕着底部中心旋转,所以设置上部分的锚点为(0.5,1)
3.3 锚点设置好了,就可以确定位置了.
3.4 可以把上下部分重合在一起,然后分别设置上下部分的锚点,
上部分的锚点为(0.5,1)