您的位置:首页 > 移动开发 > IOS开发

iOS - 转场动画

2016-04-06 15:57 393 查看
先上效果图

①还未旋转之前



②旋转中



③旋转后



如图所示:

此处动画为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 图层可三维旋转

总之大家试试吧 谢谢你能看完!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: