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

细节

时间: 2024-09-20 00:31:45

UIScrollView视差模糊效果的相关文章

UIScrollView视差效果动画

UIScrollView视差效果动画   效果   源码 https://github.com/YouXianMing/Animations // // ScrollImageViewController.m // Animations // // Created by YouXianMing on 15/11/24. // Copyright 2015年 YouXianMing. All rights reserved. // #import "ScrollImageViewControlle

用UIScrollView产生视差效果

用UIScrollView产生视差效果 效果: 高级效果: 源码: MoreInfoView.h  +  MoreInfoView.m // // MoreInfoView.h // YXCell // // Copyright (c) 2014年 Y.X. All rights reserved. // #import <UIKit/UIKit.h> @interface MoreInfoView : UIView @property (nonatomic, strong) UIImageV

iOS8模糊效果UIVisualEffectView的使用

iOS8模糊效果UIVisualEffectView的使用 效果: 源码: // // ViewController.m // EffectView // // Created by XianMingYou on 15/3/14. // Copyright (c) 2015年 XianMingYou. All rights reserved. // #import "ViewController.h" @interface ViewController () @property (no

使用UITableView实现图片视差效果

使用UITableView实现图片视差效果 视差效果如下:   原理: 根据偏移量计算不同的移动速度,so easy! // // RootTableViewController.h // TableView // // Copyright (c) 2014年 Y.X. All rights reserved. // #import <UIKit/UIKit.h> @interface RootTableViewController : UITableViewController @end /

固定UIScrollView滑动的方向

固定UIScrollView滑动的方向 一般而言,我们通过这两个参数CGRectMake以及contentSize就可以自动的让UIScrollView只往一个方向滚动.但我遇到过非常奇葩的情况,那就是即使设置的CGRectMake以及contentSize没有一点点问题,这个UIScrollView也能够上下左右滚动-_-!!. 为了不依赖于CGRectMake以及contentSize,我们可以通过在代理方法scrollViewDidScroll:中进行限制即可. 没有限制之前的效果: 源码

ios开发中uiscrollview里嵌套一个uiscrollview

问题描述 ios开发中uiscrollview里嵌套一个uiscrollview ios开发中uiscrollview里嵌套一个uiscrollview 其中小得scrollview是一个用于放滚动图片的.大得scrollview是用于整个view滚动的..其中还有很多别的view譬如imageview等,现在遇到这样的问题:我滚动大得scrollview,放滚动图片的scroll不跟着动,就一直悬在固定的位置.求解 急呀 解决方案 如果小的uiscrollview是作为subview添加到外部

iOS开发UI篇—UIScrollView控件实现图片轮播

一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" 2 3 @interface YYViewController () <UIScrollViewDelegate> 4 @property (weak, nonatomic) IBOutlet UIScrollView *scrollview; 5 /** 6 * 页码 7 */ 8 @property (weak, nonato

滚动视差网站工具与教程

滚动视差绝对是今年最炫的设计风格,也是最近的设计趋势,之前我们分享了<60多个超炫的视差滚动效果网站设计欣赏>相信让很多人都耳目一新,现在整理几个比较不错的开源滚动视差项目,它们大都托管在github上,大家可以用在自己的项目中,当然,从中获取灵感自己开发会更好-- Scrollorama curtain.js jQuery-Parallax stellar.js jparallax Skrollr Parallax.js A Simple Parallax Scrolling Techniq

2013网页设计趋势:滚动视差网站设计

文章描述:网页特效:滚动视差设计指南. 作为未来网页设计的热点趋势之一的"滚动视差"在近年来被越来越多网站所采用,特殊新颖的展示模式也让许多用户眼前一亮.网络上也如雨后春笋一般出 现了很多像<30个让人兴奋的视差滚动网站>.<60个视差滚动网站赏析>--等一系列的视差滚动的文章,不过赏析的居多,真正指导设计师如何去设计,如 何去实现的实用型文章却很少.于是萌发了自己写一篇的想法,与感兴趣的人共同交流下滚动视察设计时的一些心得. 什么是滚动视差?视差滚动(Para