码迷,mamicode.com
首页 > 移动开发 > 详细

iOS----四方块 动画按钮实现

时间:2014-08-01 16:03:41      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:ios   动画   

         突然想起来上一次面试考官提问的一个问题:如何创建一个菱形,并让它相应单击事件,可以开合的效果。当时第一反应使用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;
    }]

移动每个图片的中心还是比较方便的。这里我实现了四个不同的动画效果,详情请看代码。下载地址

最终效果如下:

bubuko.com,布布扣

iOS----四方块 动画按钮实现,布布扣,bubuko.com

iOS----四方块 动画按钮实现

标签:ios   动画   

原文地址:http://blog.csdn.net/thelittleboy/article/details/38337399

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!