UIScrollView视差模糊效果

简介:

UIScrollView视差模糊效果

 

效果

 

源码

https://github.com/YouXianMing/Animations


//
//  ScrollBlurImageViewController.m
//  Animations
//
//  Created by YouXianMing on 15/11/25.
//  Copyright © 2015年 YouXianMing. All rights reserved.
//

#import "ScrollBlurImageViewController.h"
#import "MoreInfoView.h"
#import "UIView+SetRect.h"
#import "Math.h"
#import "UIImage+ImageEffects.h"

static int viewTag = 0x11;

@interface ScrollBlurImageViewController () <UIScrollViewDelegate>

@property (nonatomic, strong) NSArray       *picturesArray;
@property (nonatomic, strong) UIScrollView  *scrollView;
@property (nonatomic, strong) Math          *onceLinearEquation;

@end

@implementation ScrollBlurImageViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
}

- (void)setup {
    
    [super setup];
    
    MATHPoint pointA = MATHPointMake(0, -50);
    MATHPoint pointB = MATHPointMake(self.view.width, self.view.width - 50);;

    self.onceLinearEquation = [Math mathOnceLinearEquationWithPointA:pointA PointB:pointB];
    
    // Init pictures data.
    self.picturesArray = @[[UIImage imageNamed:@"beauty"],
                           [[UIImage imageNamed:@"beauty"] blurImage],
                           [[UIImage imageNamed:@"beauty"] grayScale]];
    
    // Init scrollView.
    CGFloat height = self.view.height;
    CGFloat width  = self.view.width;
    
    _scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
    _scrollView.delegate                       = self;
    _scrollView.pagingEnabled                  = YES;
    _scrollView.backgroundColor                = [UIColor blackColor];
    _scrollView.showsHorizontalScrollIndicator = NO;
    _scrollView.bounces                        = NO;
    _scrollView.contentSize                    = CGSizeMake(self.picturesArray.count * width, height);
    [self.view addSubview:_scrollView];
    
    // Init moreInfoViews.
    for (int i = 0; i < self.picturesArray.count; i++) {
        
        MoreInfoView *show     = [[MoreInfoView alloc] initWithFrame:CGRectMake(i * width, 0, width, height)];
        show.imageView.image   = self.picturesArray[i];
        show.layer.borderWidth = 0.25f;
        show.layer.borderColor = [[UIColor grayColor] colorWithAlphaComponent:0.25f].CGColor;
        show.tag               = viewTag + i;
        
        [_scrollView addSubview:show];
    }
    
    [self bringTitleViewToFront];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    CGFloat X = scrollView.contentOffset.x;
    
    for (int i = 0; i < self.picturesArray.count; i++) {
        
        MoreInfoView *show = [scrollView viewWithTag:viewTag + i];
        show.imageView.x   = _onceLinearEquation.k * (X - i * self.view.width) + _onceLinearEquation.b;
    }
}

@end

细节


目录
相关文章
|
5月前
|
存储 编解码 算法
第5章-着色基础-5.4-锯齿和抗锯齿
第5章-着色基础-5.4-锯齿和抗锯齿
44 1
|
7月前
|
图形学
【unity小技巧】实现FPS武器的瞄准放大效果(UGUI实现反向遮罩,全屏遮挡,局部镂空效果)
【unity小技巧】实现FPS武器的瞄准放大效果(UGUI实现反向遮罩,全屏遮挡,局部镂空效果)
120 1
|
前端开发 JavaScript
神奇的滤镜!巧妙实现内凹的平滑圆角
神奇的滤镜!巧妙实现内凹的平滑圆角
295 0
神奇的滤镜!巧妙实现内凹的平滑圆角
|
前端开发
自定义View 绘制 ,范围裁切,几何变换
自定义View 绘制 ,范围裁切,几何变换
自定义View 绘制 ,范围裁切,几何变换
|
前端开发 JavaScript 内存技术
css动画animation绘制向四周扩散的圆圈
css动画animation绘制向四周扩散的圆圈
1430 0
|
JavaScript
视差效果的实际应用
用JS实现跟鼠标的互动效果,图片向着鼠标移动的相反方向转动。可以想象一下,Z轴上从远到近,有三张背景透明的图(从屏幕正方看,三张图重叠,看上去就是一张图)然后,让他们在 X轴 或者 Y轴转动,就形成了视差效果。
166 0
使用手势对UIImageView进行缩放、旋转和移动
使用手势对UIImageView进行缩放、旋转和移动
106 0
杭电OJ变形 骨牌铺满方格 2501
杭电OJ变形 骨牌铺满方格 2501
107 0
|
Android开发
autojs圆形波纹和方形波纹
牙叔教程 简单易懂
147 0
3D立方体图片切换动画
在线演示 本地下载
1017 1

热门文章

最新文章