IOS开发UI—transframe属性

一、transform属性

在OC中，通过transform属性可以修改对象的平移、缩放比例和旋转角度

常用的创建transform结构体方法分两大类

  1）创建“基于控件初始位置”的形变 （只能基于初始的值变化）

   CGAffineTransformMakeTranslation（平移）

   CGAffineTransformMakeScale（缩放）

   CGAffineTransformMakeRotation（旋转）

  2）创建“基于transform参数”的形变 (基于现有值，可以一直变化)

   CGAffineTransformTranslate

   CGAffineTransformScale

   CGAffineTransformRotate

补充：

在OC中，所有跟角度相关的数值，都是弧度值，180° = M_PI

正数表示顺时针旋转

负数表示逆时针旋转

提示：由于transform属性可以基于控件的上一次的状态进行叠加形变，例如，先旋转再平移。因此在实际动画开发中，当涉及位置、尺寸形变效果时，大多修改控件的transform属性，而不是frame、bounds、center 。

二、代码案例

//  Created by shumei on 15/9/5.
//  Copyright (c) 2015年 shumei. All rights reserved.
//
/**
 * 内容:transframe属性的实现，详细参考博客
 * 提示:http://justsee.iteye.com/blog/1969933 关于CGAffineTransform矩阵的讲解
 * 作用:
 * 总结:
 *
 */

#pragma mark - transframe属性实现

#import "ViewController_transframe.h"

// 拓展类
@interface ViewController_transframe ()

// 声明头像属性
@property(nonatomic, weak)IBOutlet UIButton *iconImage;

@end


// 实现
@implementation ViewController_transframe

// 枚举类型
typedef enum {
    // 枚举默认第一次索引是从0开始的，用户可以自己进行设置初始值，会依次递增
    topBtnTag = 1,
    downBtnTag,
    leftBtnTag,
    rightBtnTag
} btnTag;


// viewDidLoad是视图加载完成后调用的方法，通常在此方法中执行视图控制器的初始化工作
// 一定不要忘记调用父类方法实现 
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    // 开始
    UIButton *iconBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    
    // 普通状态
    [iconBtn setBackgroundImage:[UIImage imageNamed:@"btn_01"] forState:UIControlStateNormal];
    [iconBtn setTitle:@"点我呀呀" forState:UIControlStateNormal];
    [iconBtn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
    
    // 高亮状态
    [iconBtn setBackgroundImage:[UIImage imageNamed:@"btn_02"] forState:UIControlStateHighlighted];
    [iconBtn setTitle:@"掉渣天" forState:UIControlStateHighlighted];
    [iconBtn setTitleColor:[UIColor blackColor] forState:UIControlStateHighlighted];
    
    // 位置
    // 考虑如何获取窗口大小以及如何设置图片的锚点
    iconBtn.frame = CGRectMake(100, 100, 100, 100);
    [iconBtn setTag:0];
    
    // 添加到视图
    [self.view addSubview:iconBtn];
    
    // 重要的一步
    self.iconImage = iconBtn;
    
    /**
     *  下面是控制的按钮
     *
     *  @return <#return value description#>
     */
    /*--------------向上-------------------*/
    UIButton *topBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    
    [topBtn setBackgroundImage:[UIImage imageNamed:@"top_normal"] forState:UIControlStateNormal];
    [topBtn setBackgroundImage:[UIImage imageNamed:@"top_highlighted"] forState:UIControlStateHighlighted];
    
    topBtn.frame = CGRectMake(125, 220, 50, 50);
    [topBtn setTag:1];
    
    [self.view addSubview:topBtn];
    
    [topBtn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
    
    
    /*--------------向下-------------------*/
    UIButton *downBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    
    [downBtn setBackgroundImage:[UIImage imageNamed:@"bottom_normal"] forState:UIControlStateNormal];
    [downBtn setBackgroundImage:[UIImage imageNamed:@"bottom_highlighted"] forState:UIControlStateHighlighted];
    
    downBtn.frame = CGRectMake(125, 320, 50, 50);
    [downBtn setTag:2];
    
    [self.view addSubview:downBtn];
    
    [downBtn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
    
    
    /*--------------向左-------------------*/
    UIButton *leftBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    
    [leftBtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal];
    [leftBtn setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted];
    
    leftBtn.frame = CGRectMake(75, 270, 50, 50);
    [leftBtn setTag:3];
    
    [self.view addSubview:leftBtn];
    
    [leftBtn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
    
    
    /*--------------向右-------------------*/
    UIButton *rightBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    
    [rightBtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal];
    [rightBtn setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted];
    
    rightBtn.frame = CGRectMake(175, 270, 50, 50);
    [rightBtn setTag:4];
    
    [self.view addSubview:rightBtn];
    
    [rightBtn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
    
    
    /*--------------放大-------------------*/
    UIButton *plusBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    
    [plusBtn setBackgroundImage:[UIImage imageNamed:@"plus_normal"] forState:UIControlStateNormal];
    [plusBtn setBackgroundImage:[UIImage imageNamed:@"plus_highlighted"] forState:UIControlStateHighlighted];
    
    plusBtn.frame = CGRectMake(125, 400, 50, 50);
    [plusBtn setTag:1];
    
    [self.view addSubview:plusBtn];
    
    [plusBtn addTarget:self action:@selector(zoom:) forControlEvents:UIControlEventTouchUpInside];
    
    
    /*--------------缩小-------------------*/
    UIButton *miniBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    
    [miniBtn setBackgroundImage:[UIImage imageNamed:@"minus_normal"] forState:UIControlStateNormal];
    [miniBtn setBackgroundImage:[UIImage imageNamed:@"minus_highlighted"] forState:UIControlStateHighlighted];
    
    miniBtn.frame = CGRectMake(230, 400, 50, 50);
    [miniBtn setTag:0];
    
    [self.view addSubview:miniBtn];
    
    [miniBtn addTarget:self action:@selector(zoom:) forControlEvents:UIControlEventTouchUpInside];
    
    
    /*--------------旋转-------------------*/
    UIButton *rotateBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    
    [rotateBtn setBackgroundImage:[UIImage imageNamed:@"right_rotate_normal"] forState:UIControlStateNormal];
    [rotateBtn setBackgroundImage:[UIImage imageNamed:@"right_rotate_highlighted"] forState:UIControlStateHighlighted];
    
    rotateBtn.frame = CGRectMake(125, 460, 50, 50);
    [rotateBtn setTag:0];
    
    [self.view addSubview:rotateBtn];
    
    [rotateBtn addTarget:self action:@selector(rotate:) forControlEvents:UIControlEventTouchUpInside];
    
    
    /*--------------初始化-------------------*/
    UIButton *backBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    
    [backBtn setTitle:@"变回去" forState:UIControlStateNormal];
    [backBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    
    backBtn.frame = CGRectMake(175, 460, 100, 100);
    [self.view addSubview:backBtn];
    
    [backBtn addTarget:self action:@selector(back) forControlEvents:UIControlEventTouchUpInside];
    
}

// 方向按钮
-(void)btnClick:(UIButton *)button {
    NSLog(@"方向");
    // 1. 获取原始的结构体值（获取原来的结构体值是为了基于原来的值修改）
    // CGAffineTransform transframe = self.iconImage.transform;
    
    // 意思是让控件平移到距离原始位置-10的位置（经过一次平移后，在怎么平移都不会在移动了）
    // self.iconImage.transform = CGAffineTransformMakeTranslation(0, -10);
 
    // 2. 修改结构体值(意思是基于当前的位置移动)
    // self.iconImage.transform = CGAffineTransformTranslate(self.iconImage.transform, 0, -10);
    // 上面一句话就已经执行完了全部步骤
    
    // 3. 重新赋值
    
    // 使用transframe属性
    CGAffineTransform transframe = self.iconImage.transform;
    
    // 根据点击的按钮不同执行不同操作
    switch (button.tag) {
        // 使用数字弊端就是别的程序员可能无法理解数代表的含义
        // 所以使用枚举替换
        case topBtnTag:
            transframe.ty -= 10;
            NSLog(@"上");
            break;
            
        case downBtnTag:
            transframe.ty += 10;
            NSLog(@"下");
            break;
            
        case leftBtnTag:
            transframe.tx += 10;
            NSLog(@"左");
            break;
            
        case rightBtnTag:
            transframe.tx -= 10;
            NSLog(@"右");
            break;
            
        default:
            break;
    }
    
    // 动画 block 块
    [UIView animateWithDuration:1.5 animations:^{
        self.iconImage.transform = transframe;
    }];
    
}

/**
 *  这个是放大缩小方法的实现
 */
-(void)zoom:(UIButton *)button {
    // 使用transframe
    CGAffineTransform transframe = self.iconImage.transform;
    
    if (button.tag) {
        // 运用button.tag 取值只能是1 或者 0 ； 1 就是真， 0 就是假
        transframe.a *= 1.5;
        transframe.d *= 1.5;
    }
    else {
        transframe.a *= 0.5;
        transframe.d *= 0.5;
    }
    
    // 设置动画
    [UIView animateWithDuration:1.5 animations:^{
        self.iconImage.transform  = transframe;
    }];
    
    // 用下面一句就可以表示完
    // self.iconImage.transform = CGAffineTransformScale(self.iconImage.transform, 1.5, 1.5);
}

/**
 *  这个是旋转，这里就是讲一个顺时针旋转就是了
 */

-(void)rotate:(UIButton *)button {
    // 在这里来进行一个综合 在规定时间被进行旋转 平移 缩放
    [UIView animateWithDuration:2 animations:^{
        self.iconImage.transform = CGAffineTransformRotate(self.iconImage.transform, -M_PI_4);
        self.iconImage.transform = CGAffineTransformScale(self.iconImage.transform, 1.5, 1.5);
        self.iconImage.transform = CGAffineTransformTranslate(self.iconImage.transform, 0, 50);
        // 会同时执行上面的动作
    }];
    
}
/**
 *  这个是清空之前设置的transframe属性
 */
-(void)back {
    self.iconImage.transform = CGAffineTransformIdentity;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}