iOS視圖彈出、平移、旋轉、翻轉、剪切等變換效果實現

效果圖：

 

1、定義屬性

@property (nonatomic, strong) UIView        *transformView;//發生變換的試圖

@property (nonatomic, strong) UIView        *backGroundView;//發生變換試圖的父試圖

@property (nonatomic, strong) UITableView   *titleTableView;

@property (nonatomic, strong) NSArray       *dataSourceAry;//數據源數組

　　

2、實現代碼

-(void)poppingViewWithTransform:(NSString *)transformStr{
    
    
    [self.view addSubview:self.backGroundView];
    
    
    self.transformView.frame = CGRectMake(SCWidth/2-100, 200, 200, 200);
    
    if ([transformStr isEqualToString:@"縮放變換"]) {
         //很簡單的變換效果，200，為Y軸從下往上平移，相反-200 是從上往下平移
        self.transformView.transform = CGAffineTransformMakeScale(0.0, 0.0);
        [UIView animateWithDuration:0.5 animations:^{
            self.transformView.transform = CGAffineTransformMakeScale(1.0, 1.0);
            
        }];
        
    }else if([transformStr isEqualToString:@"平移變換"]){
        //很簡單的變換效果，200，為Y軸從下往上平移，相反-200 是從上往下平移，X軸變換同理
        self.transformView.transform = CGAffineTransformMakeTranslation(0, -200);
        [UIView animateWithDuration:0.5 animations:^{
            self.transformView.transform = CGAffineTransformMakeTranslation(0,0);
        }];
    }else if([transformStr isEqualToString:@"翻轉變換"]){
        //下面注釋的代碼，最后Z軸改成一個數字，例12，可以實現旋轉變換
        //self.transformView.layer.transform = CATransform3DMakeRotation(12, 1, 1, 0);
        self.transformView.layer.transform =  [self firstStep];
        
        [UIView animateWithDuration:0.5 animations:^{
            self.transformView.layer.transform = CATransform3DMakeRotation(0, 1, 0, 0);
        }];
    }else if([transformStr isEqualToString:@"旋轉變換"]){
        //具體效果可以更改 M_PI_4 角度來實現
        self.transformView.transform = CGAffineTransformMake(( cos(M_PI_4) ), ( sin(M_PI_4) ), -( sin(M_PI_4) ), (cos(M_PI_4) ), 0, 0);
        [UIView animateWithDuration:0.5 animations:^{
            self.transformView.transform = CGAffineTransformMake(( cos(M_PI) ), ( sin(M_PI) ), -( sin(M_PI) ), (cos(M_PI) ), 0, 0);
        }];
    }else if([transformStr isEqualToString:@"剪切變換"]){
        //使用仿射基礎方法CGAffineTransformMake,設置x和y都為0.5的斜切
        //可以試着把第一個1換成0.5，看看效果
        //可以試着把第二個1換成0.5，看看效果
        self.transformView.transform =  CGAffineTransformMake(1,0.5,0.5,1,0,0);
        [UIView animateWithDuration:0.5 animations:^{
            self.transformView.transform = CGAffineTransformMake(1,0,0,1,0,0);
        }];
    }
    
    
    self.transformView.layer.cornerRadius = 7;
    self.transformView.layer.masksToBounds = YES;
    [self.backGroundView addSubview:self.transformView];
」

　　

其中，翻轉變化用到這個：

-(CATransform3D)firstStep{
    //讓transform1為單位矩陣
    CATransform3D transform1 = CATransform3DIdentity;
    //z軸縱深的3D效果和CATransform3DRotate配合使用才能看出效果
    //m34很重要
    transform1.m34 = 1.0/-100;
    //x和y都縮小為原來的0.9，z不變
    transform1 = CATransform3DScale(transform1, 0.9, 0.9, 1);
    //繞x軸向內旋轉15度
    transform1 = CATransform3DRotate(transform1,15.0f * M_PI/180.0f, 1, 0, 0);
    return transform1;
}