码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-03-31 23:53:48      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:

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

技术分享

最终效果:

技术分享

应用中的效果:

技术分享

 

 

素材图片:

技术分享

技术分享

源码:

//
//  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

 

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

标签:

原文地址:http://www.cnblogs.com/YouXianMing/p/4377584.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!