转载

iOS开发 | 双面view

将一个view绕y轴旋转180度是这样的：

iOS开发 | 双面view

旋转.gif

正面是：

iOS开发 | 双面view

正面

反面是：

iOS开发 | 双面view

反面

有时我们可能需要将背面设置成不同的图片或view，如下：

iOS开发 | 双面view

双面view.gif

这种效果如何实现？

我的思路：

在一个透明view上依次放两个view，下面那个是bottomView，上面那个是topView，将bottomView旋转180度。翻转的时候，将透明view旋转180度。

为什么要将bottomView旋转180度？

如果不旋转，效果是这样的：

iOS开发 | 双面view

图片是反的.gif

图片是反的。为了能在旋转180度之后得到正确的图片，只有先将它旋转180度，这样两次旋转180后就是正的了。这就是为什么要先将bottomView旋转180度的原因。

切换两个view的时机？

当动画进行到一半的时候，将bottomView移到上面。

代码实现：

这是一个自定义view

.h文件：

#import 
@interface TwoSidedView : UIView
/** 顶部view */
@property (nonatomic, strong) UIView *topView;
/** 底部view */
@property (nonatomic, strong) UIView *bottomView;
/**
 翻转
 @param duration 翻转动画所需时间
 @param completion 动画结束后的回调
 */
- (void)turnWithDuration:(NSTimeInterval)duration completion:(void(^)(void))completion;
@end

.m文件：

#import "TwoSidedView.h"
@implementation TwoSidedView
/** 设置顶部view */
- (void)setTopView:(UIView *)topView {
    _topView = topView;
    
    [self addSubview:topView];
    [self bringSubviewToFront:_topView];
}
/** 设置底部view */
- (void)setBottomView:(UIView *)bottomView {
    _bottomView = bottomView;
    
    [self addSubview:_bottomView];
    [self sendSubviewToBack:_bottomView];
    
    // 翻转180度
    CATransform3D transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);
    _bottomView.layer.transform = transform;
}
/**
 翻转
 
 @param duration 翻转动画所需时间
 @param completion 动画结束后的回调
 */
- (void)turnWithDuration:(NSTimeInterval)duration completion:(void(^)(void))completion{
    if (!self.topView || !self.bottomView) {
        NSAssert(NO, @"未设置topView或bottomView");
    }
    
    // 动画进行到一半的时候将bottomView移到上层
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(duration / 2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self bringSubviewToFront:self.bottomView];
    });
    
    // 翻转180度
    [UIView animateWithDuration:duration animations:^{
        CATransform3D transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);
        self.layer.transform = transform;
    } completion:^(BOOL finished) {
        if (completion) {
            completion();
        }
    }];
}
@end

这里是demo

作者：无夜之星辰

链接：http://www.jianshu.com/p/8a5133d044a6

正文到此结束