Last active
December 16, 2015 14:59
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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