目的:通过按钮来操作图片的位置,旋转以及图片大小,点击图片形变恢复到原来状态(Xcode 6 beat3)
效果展示:
1.界面搭建
新建一个工程,设置手机型号为iphone5s,将需要的素材导入到工程里的Supporting Files文件下。打开Main.storyboard文件,此时View Controller界面非手机正常比例,此时Use Auto Layout 和Use Size Classes 是选勾状态,去掉选勾就可以了。
然后将Button控件拖进该界面,调整好位置。设置Button属性:将其Type设置为Custom,删除Default Title里面的Button。然后设置合适的Tag,每个控件的Tag尽量设置的不一样。在Default状态下Background 设置成我们素材里面对应normal图片,然后设置高亮状态下得Background。
然后连线,按住Ctrl键,点击控件拖到viewController.h中
根据属性设置,需要监听它则属性选项Action要要改变其属性则选择Outlet,
2.代码实现
// 实现上下左右移动
- (IBAction)run:(id)sender {
// 动画开始地方
[UIView beginAnimations:nil context:nil];
// 动画时间设置
[UIView setAnimationDuration:0.5 ];
// 取出图片的frame属性
CGRect tempFrame = _btn.frame;
// 判断点击的按钮 此处tag不可以使用点语法
NSInteger tag = [sender tag];
switch (tag) {
case 1:
tempFrame.origin.y -= kDelat;
break;
case 2:
tempFrame.origin.x += kDelat;
break;
case 3:
tempFrame.origin.y += kDelat;
break;
case 4:
tempFrame.origin.x -= kDelat;
break;
default:
break;
}
_btn.frame = tempFrame;
// 动画结束位置
[UIView commitAnimations];
}
// 实现旋转
- (IBAction)rotate:(id)sender {
// 动画开始地方
[UIView beginAnimations:nil context:nil];
// 动画时间设置
[UIView setAnimationDuration:0.5 ];
// 判断点击的按钮 此处tag不可以使用点语法
NSInteger tag = [sender tag];
// 将_btn.transform里面角度属性在其原来的值基础上加上或者PI/4
if(tag == 5) _btn.transform = CGAffineTransformRotate(_btn.transform, -M_PI_4);
else if (tag == 6) _btn.transform = CGAffineTransformRotate(_btn.transform, +M_PI_4);
[UIView commitAnimations];
}
// 实现缩放
- (IBAction)plusmin:(id)sender {
// 动画开始地方
[UIView beginAnimations:nil context:nil];
// 动画时间设置
[UIView setAnimationDuration:0.5];
// 判断点击的按钮 此处tag不可以使用点语法
NSInteger tag = [sender tag];
// 将_btn.transform的x/y属性扩大为原来的1.2倍或者缩小0.8倍
if(tag == 7) _btn.transform = CGAffineTransformScale(_btn.transform, 1.2, 1.2);
else if (tag == 8) _btn.transform = CGAffineTransformScale(_btn.transform, 0.8, 0.8);
[UIView commitAnimations];
}
// 实现恢复原图大小
- (IBAction)recovery:(id)sender {
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.3];
// 将图片属性恢复到初始化状态
_btn.transform = CGAffineTransformIdentity;
[UIView commitAnimations];
}
3.总结
第一篇UI学习笔记,所以记录的较为详细。Storyboard在学习中是一个很好的辅助工具,UI中的控件属性在此处均可以设置。函数中用到的控制形变的函数:
将图片的尺寸在原来的基础上宽度扩大为原来的sx倍,高度扩大为原来的sy倍:
CGAffineTransform CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy);
将图片的角度在原来的基础上旋转angle:
CGAffineTransform CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)
修改位置的函数:通过修改frame的值来修改图片的位置
CGRect tempFrame = _btn.frame;
// 判断点击的按钮 此处tag不可以使用点语法
#define kDelat 50
NSInteger tag = [sender tag];
switch (tag) {
case 1:
tempFrame.origin.y -= kDelat;
break;
case 2:
tempFrame.origin.x += kDelat;
break;
case 3:
tempFrame.origin.y += kDelat;
break;
case 4:
tempFrame.origin.x -= kDelat;
break;
default:
break;
}
_btn.frame = tempFrame;
动画效果代码:
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.5 ];
/ * 代码 */
[UIView commitAnimations];
将图片属性恢复到初始化状态函数:
_btn.transform = CGAffineTransformIdentity;
(在调试的时候,作者发现一个小小的bug,当图片旋转角度为±PI/4、±3*(PI/4)的时候,点击方向键,图片会突然消失。现在能力有限,此问题留给以后处理。)