1.按钮操作

目的:通过按钮来操作图片的位置,旋转以及图片大小,点击图片形变恢复到原来状态(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)的时候,点击方向键,图片会突然消失。现在能力有限,此问题留给以后处理。)



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值