突然想起来上一次面试考官提问的一个问题：如何创建一个菱形，并让它相应单击事件，可以开合的效果。当时第一反应使用button来填充菱形的图片来实现，不过考官说，这样点击的区域不够灵敏，毕竟button是矩形的。当时确实被考官问住了，后来想起来，发现原来如此！
大家可能见过这个函数：setTransform：没错，我们实现的原理就是将正方形button旋转45度，变成矩形。结合精确的坐标计算，通过UIView动画来实现开合效果。是不是很简单呢~
如果你不想用button用imageView也可以的，加入手势识别来相应单击事件。贴代码：
[_myImage setTransform:CGAffineTransformMakeRotation(M_PI_4)];
[_myImage2 setTransform:CGAffineTransformMakeRotation(M_PI_4)];
[_myImage3 setTransform:CGAffineTransformMakeRotation(M_PI_4)];
[_myImage4 setTransform:CGAffineTransformMakeRotation(M_PI_4)];
以上是将声明的四个image旋转45度。接下来是动画：
[UIView animateWithDuration:0.7 animations:^{
//移动图片
_myImage.center = CGPointMake(_myImage.center.x, _myImage.center.y-length);
_myImage2.center = CGPointMake(_myImage2.center.x-length, _myImage2.center.y);
_myImage3.center = CGPointMake(_myImage3.center.x+length, _myImage3.center.y);
_myImage4.center = CGPointMake(_myImage4.center.x, _myImage4.center.y+length);
length = -length;
}]
移动每个图片的中心还是比较方便的。这里我实现了四个不同的动画效果，详情请看代码。下载地址
最终效果如下：