山寨"每日故宫"应用的图层遮罩效果

山寨"每日故宫"应用的图层遮罩效果

最终效果:

应用中的效果:

素材图片:

源码:

//
//  ViewController.m
//  每日故宫
//
//  Created by XianMingYou on 15/3/30.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong) UIImageView *bgImageView;
@property (nonatomic, assign) CGRect       leftRect;
@property (nonatomic, assign) CGRect       rightRect;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 背景view
    self.bgImageView        = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"background.jpg"]];
    self.bgImageView.center = self.view.center;
    [self.view addSubview:self.bgImageView];
    
    // 存储必要的frame值
    CGRect  midRect = self.bgImageView.frame;
    CGFloat offsetX = 20.f;
    self.leftRect   = CGRectMake(midRect.origin.x - offsetX,
                                 midRect.origin.y,
                                 midRect.size.width,
                                 midRect.size.height);
    self.rightRect  = CGRectMake(midRect.origin.x + offsetX,
                                 midRect.origin.y,
                                 midRect.size.width,
                                 midRect.size.height);
    
    // 加载图片
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"31"]];
    imageView.frame        = self.view.bounds;
    [self.view addSubview:imageView];
    
    
    // 执行动画
    [self animationBGImageViewWithDirection:YES];
}

- (void)animationBGImageViewWithDirection:(BOOL)left {
    [UIView animateWithDuration:2.f animations:^{
        if (left == YES) {
            self.bgImageView.frame = self.rightRect;
        } else {
            self.bgImageView.frame = self.leftRect;
        }
    } completion:^(BOOL finished) {
        [self animationBGImageViewWithDirection:!left];
    }];
}

@end