iOS - 转场动画

先上效果图
①还未旋转之前
iOS - 转场动画_第1张图片
②旋转中
iOS - 转场动画_第2张图片
③旋转后

如图所示:
此处动画为3D效果 贴上封装好的方法(方法有二)

#import <UIKit/UIKit.h>

@interface TransView : UIView


/** 二维动画旋转*/
-(void)transition2DwithRotation:(CGFloat) transform Duration:(CGFloat)time;

/** 三维动画旋转*/
-(void)transition3DwithRotation:(CATransform3D)transform3D Duration:(CGFloat)time finishImage:(UIImage *)finishImage hadRotate:(BOOL)ret;


@end
#import "TransView.h"

@implementation TransView

-(instancetype)initWithFrame:(CGRect)frame{

    if (self = [super initWithFrame:frame]) {
        self.frame = frame;
    }

    return self;

}

/** 二维动画旋转*/
-(void)transition2DwithRotation:(CGFloat) transform Duration:(CGFloat)time{

    //让view旋转
    [UIView animateWithDuration:time animations:^{

        self.transform = CGAffineTransformMakeRotation(transform);

    } completion:^(BOOL finished) {

    }];



}

/** 三维动画旋转*/
-(void)transition3DwithRotation:(CATransform3D)transform3D Duration:(CGFloat)time finishImage:(UIImage *)finishImage hadRotate:(BOOL)ret{


    //方法一
    [UIView animateWithDuration:time animations:^{

        self.layer.transform = transform3D;

    } completion:^(BOOL finished) {


        if (finishImage) {

            self.backgroundColor = [UIColor colorWithPatternImage:finishImage];
        }

        [UIView animateWithDuration:time animations:^{
            self.layer.transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);
        }];

    }];

    //方法二
// [UIView transitionWithView:self duration:time options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
// if (finishImage) {
// //默认图片
// self.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"user_default"]];
// }
// } completion:^(BOOL finished) {
// 
// if (finishImage) {
// //旋转后的图片
// self.backgroundColor = [UIColor colorWithPatternImage:finishImage];
// } 
// });
// 
// 
// }];
}

CATransform3DMakeRotation(M_PI, 0, 1, 0);
第一个参数:以(x,y,z)的空间向量旋转到哪个角度
M_PI 3.14159265358979323846264338327950288 /* pi */
M_PI_2 1.57079632679489661923132169163975144 /* pi/2 */
M_PI_4 0.785398163397448309615660845819875721 /* pi/4 */
M_1_PI 0.318309886183790671537767526745028724 /* 1/pi */
M_2_PI 0.636619772367581343075535053490057448 /* 2/pi */

注意点:
view.transform 是二维旋转
view.layer.transform 图层可三维旋转

总之大家试试吧 谢谢你能看完!

你可能感兴趣的:(ios,动画,3D)