Skip to content

Instantly share code, notes, and snippets.

@amolloy
Last active December 16, 2015 14:59
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save amolloy/5452808 to your computer and use it in GitHub Desktop.
Save amolloy/5452808 to your computer and use it in GitHub Desktop.
A quick'n dirty reproduction of the Yahoo! Weather animated blurred background image. Requires GPUImage and AHEasing. Note that this is mostly an experiment and has several rough edges! To use it, create an instance and set it as a UITableView's backgroundView. You also need to provide the UITableView to the ASMBlurredImageBackgroundView.
//
// ASMBlurredImageBackgroundView.h
// Created by Andy Molloy on 4/19/13.
//
//
#import <UIKit/UIKit.h>
@interface ASMBlurredImageBackgroundView : UIView
@property (nonatomic, assign) double constant;
@property (nonatomic, assign) double factor;
@property (nonatomic, assign) double max;
@property (nonatomic, assign) double min;
@property (nonatomic, weak) UITableView* tableView;
-(void)setImage:(UIImage*)image;
@end
//
// ASMBlurredImageBackgroundView.m
// Created by Andy Molloy on 4/19/13.
//
//
#import "ASMBlurredImageBackgroundView.h"
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wnewline-eof"
#import "GPUImage.h"
#import "easing.h"
#pragma clang diagnostic pop
@interface ASMBlurredImageBackgroundView ()
@property (nonatomic, strong) GPUImagePicture* picture;
@property (nonatomic, strong) GPUImageView* imageView;
@property (nonatomic, strong) GPUImageFastBlurFilter* blurFilter;
@property (nonatomic, strong) GPUImageTransformFilter* transformFilter;
@property (nonatomic, strong) GPUImageGammaFilter* gammaFilter;
@end
@implementation ASMBlurredImageBackgroundView
-(id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
self.imageView = [[GPUImageView alloc] initWithFrame:self.bounds];
[self addSubview:self.imageView];
self.max = 3;
self.min = 0;
self.constant = 0;
self.factor = 0.01;
}
return self;
}
-(void)setTableView:(UITableView *)tableView
{
[_tableView removeObserver:self
forKeyPath:@"contentOffset"];
_tableView = tableView;
[_tableView addObserver:self
forKeyPath:@"contentOffset"
options:0
context:nil];
}
-(void)setImage:(UIImage *)image
{
self.picture = [[GPUImagePicture alloc] initWithImage:image];
self.blurFilter = [[GPUImageFastBlurFilter alloc] init];
[self.picture addTarget:self.blurFilter];
self.transformFilter = [[GPUImageTransformFilter alloc] init];
[self.blurFilter addTarget:self.transformFilter];
self.gammaFilter = [[GPUImageGammaFilter alloc] init];
[self.transformFilter addTarget:self.gammaFilter];
[self.gammaFilter addTarget:self.imageView];
}
-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
double vv = self.tableView.contentOffset.y;
vv = vv * self.factor + self.constant;
vv = MAX(self.min, MIN(self.max, vv));
self.blurFilter.blurSize = vv;
const CGFloat shiftDist = 40;
CGFloat scale = (self.picture.outputImageSize.width + shiftDist) / self.picture.outputImageSize.width;
CGAffineTransform scaleTransform = CGAffineTransformMakeScale(scale, scale);
float mv = (self.tableView.contentOffset.y * 0.1f) / shiftDist;
mv = MIN(1, MAX(0, mv));
mv = QuarticEaseOut(mv);
mv*= shiftDist / self.picture.outputImageSize.width;
CGAffineTransform translateTransform = CGAffineTransformMakeTranslation(0, -mv);
self.transformFilter.affineTransform = CGAffineTransformConcat(translateTransform, scaleTransform);
self.gammaFilter.gamma = 1 + (vv * 0.25f);
[self.picture processImage];
}
@end
ASMBlurredImageBackgroundView* backgroundImageView = [[ASMBlurredImageBackgroundView alloc] initWithFrame:self.view.bounds];
[backgroundImageView setImage:[UIImage imageNamed:@"TestImage"]];
backgroundImageView.tableView = self.tableView;
self.tableView.backgroundView = backgroundImageView;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment