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月前
|
移动开发 前端开发 HTML5
彩色大风车泡泡Canvas特效
彩色大风车泡泡Canvas特效
54 7
彩色大风车泡泡Canvas特效
|
Web App开发 存储 移动开发
用 Canvas 实现一个太阳系动画效果
用 Canvas 实现一个太阳系动画效果
用 Canvas 实现一个太阳系动画效果
|
前端开发
自定义View 绘制 ,范围裁切,几何变换
自定义View 绘制 ,范围裁切,几何变换
自定义View 绘制 ,范围裁切,几何变换
|
前端开发 开发工具
教你用HTML+CSS实现百叶窗动画效果
我们浏览网页的时候总能看见一些炫酷的特效,比如百叶窗效果,本文我们就用HTML+CSS制作一个百叶窗小项目,适合刚学前端的小伙伴,使用代码简单易懂,很容易上手,学习完本文后,相信你也能敲出来属于自己的百叶窗效果,改变图片及相应盒子的大小,有女朋友的可以试着放几张在一起的照片,也是一件非常浪漫的事
540 0
教你用HTML+CSS实现百叶窗动画效果
|
前端开发 JavaScript
canvas中的拖拽、缩放、旋转 (上) —— 数学知识准备
canvas中的拖拽、缩放、旋转 (上) —— 数学知识准备
876 0
canvas中的拖拽、缩放、旋转 (上) —— 数学知识准备
使用手势对UIImageView进行缩放、旋转和移动
使用手势对UIImageView进行缩放、旋转和移动
97 0
|
Python
图片旋转 90、180、270
图片旋转 90、180、270
170 0
u3d无锯齿遮罩shader-可用于ugui
图片.png 图片.png // 遮罩shader Shader "Custom/CircleMask" { Properties{ _MainTex("MainTex", 2D) = "white" ...
1750 0
第41天:匀速、缓动运动和图片无缝滚动
一、匀速运动和缓动运动 缓动运动公式:leader=leader+(target-leader)/10;//leader为初始值0,target为结束值,10可以改变,值越大,速度越慢 1 DOCTYPE html> 2 3 4 5 运动 6 7 .
1047 0