Bluring a dynamic background - ios

I know a few methods to blur images - the Apple class(ApplyLightEffect) , and the CIFilter , but they are all takes UIImage and create a blur.
I need to simply create some layer above images that are moving, and blur this layer so everything behind is blur. the blur effect should be very gentle.
How would i get that in a simple way ? are there more ways to apply similar effects to blur that i can check ? (which are dynamic )
Thanks .

Check out this iOS Framework:
https://github.com/nicklockwood/FXBlurView
Instead of instantiating your view like this:
UIView *view = [[UIView alloc] init];
Import FXBlurView and do this:
FXBlurView *blurredView = [[FXBlurView alloc] init];
You can also set some custom parameters:
[blurredView setBlurRadius:30]; //Sets radius of blur
[blurredView setDynamic:NO]; //Disables whether the blur updates in real time.
[blurredView setBlurEnables:YES]; //Enables/disables the blur.
[blurredView setTintColor:nil]; //Set to nil to get rid of the blue glow from the default iOS tint color.
That should do it.

Related

How do I dim a UITableViewCell's cell.backgroundView?

In my table, I'm currently setting the background of the cells as an image like so:
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Placeholder.png"]];
However, the white text that overlays this image in the cell is hard to read, so I'd like to add a dimming effect to it.
As far as I know, the closest thing that's available is UIBlurEffectStyleLight, but this blurs rather than dims, and the blur effect is too strong, making the image barely visible. Is there a way to dim it instead?
You might want to add a UIView between the image and the text, then give it a black background colour and set its alpha to like 0.3 or an appropriate amount
Reduce the alpha of the imageView
cell.backgroundView.alpha = 0.5; //Alpha runs from 0.0 to 1.0

iOS image blending like Fused app

I want to blend two UIImages as Fused App is doing:
https://itunes.apple.com/us/app/fused-double-exposure-video/id869117407?mt=8
What Fused is doing, it takes two images (foreground & background) and apply blending in such a way that background remains the same and user can move,rotate & size the foreground image. I attached two images for better understanding. I want to achieve the same behaviour in my app. I have tried all CoreImage & CoreGraphics but I could not achieve this. Help needed from all of you.
First Screen: After applying Overly blend mode.
Second Screen: Change the size of foreground image:
My Result:
You can achieve what you want by using CHTStickerView, I've used it before and it works great. CHTStickerView is a movable, resizable, rotatable UIView with one finger, which is fully customizable.
Use CHTStickerView as your foreground image and UIImageView as your background image.
So your code should look something like this:
- (void)viewDidLoad {
[super viewDidLoad];
//background
UIImageView *backgroundImageView = [[UIImageView alloc] initWithFrame:self.view.frame];
[backgroundImageView setImage:#"background.png"];
[self.view addSubview:backgroundImageView];
//foreground
UIImageView *foregroundImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 150, 150)];
[foregroundImageView setImage:[UIImage imageNamed:#"foreground.png"]];
CHTStickerView *stickerView = [[CHTStickerView alloc] initWithContentView:foregroundImageView]; //set your foreground image as content in CHTStickerView
stickerView.center = self.view.center;
stickerView.delegate = self;
[stickerView setImage:[UIImage imageNamed:#"Close"] forHandler:CHTStickerViewHandlerClose];
[stickerView setImage:[UIImage imageNamed:#"Rotate"] forHandler:CHTStickerViewHandlerRotate];
[self.view addSubview:stickerView];
}
UPDATE
Alright I downloaded the app and checked out blend. I think what the app is doing is just getting the opacity value of the foreground image with the slide bar and drawing the foreground image (opacity set) on the background image.
So to set the opacity of a UIImage check this out: How to set the opacity/alpha of a UIImage?
And to draw and image over another check this out: Draw another image on a UIImage
To summarize, what you need to do is:
1) get the position and size of the CHTStickerView after user rotated and resize
2) get the UIImage from CHTStickerView, get the opacity value from slider
3) set opacity to image and draw image on your background image
Hope this helps!

how to implement this animation in iOS?

I am not sure about how to present this question because I don't know the animation term that I should use.
I need to know about this tree presentation animation. As it is appearing form root to top.
Please take a look on attached .gif file and let me know if anyone know about this animation or if you can guide me with example.
I will really appreciate.
Thanks for your time.
The best option for you is to split up the gif into multiple images and then do the following:
NSArray *gifImagesArray = [NSArray arrayWithObjects:imageOne, imageTwo, imageThree, nil];
imageView.animationImages = animateImagesArray;
imageView.animationRepeatCount = 1;
imageView.animationDuration = 1.0f;
[imageView startAnimating];
Edit following comments:
If you can't use multiple images you have to write the animation yourself.
One suggestion is to add a circular mask to the UIImage and animate it's removal.
This link explains how to draw a circular CALayer: Circular Progress Bars in IOS
This one here will show you how to create a mask on a UIImage: Simply mask a UIView with a rectangle
now all you have to do is a simple animation.
I have a solution that will work for this problem.
We can use gif image and convert it into UIImage object. So image object will work same as animation.
Thanks all for your answers.
In my opinion, I will separate this animation to 4 parts:
animation to show full black tree from center.
animation to show Texts
animation to show blue leafs.
animation to show 2 buttons at bottom.
You can use this framework https://github.com/facebook/pop to operate all animations step by step or even Core Animation.
Please do more research... I think you will success to make one.
You can achieve this animation using simple UIImageView, that can load multiple images using animationImages property of UIImageView.
First, create one NSMutablerArray of images.
then asssign that images to imageView, and animationDuration for that images.
UIImageView *animationImageView = [[UIImageView alloc] initWithFrame:CGRectMake(60, 95, 86, 193)];
animationImageView.animationImages = images;
animationImageView.animationDuration = 0.5;
add the imageview to view.
[self.view addSubview:animationImageView];
[animationImageView startAnimating];

Blur Effect in iOS8

I am trying to create blur effect on the UIView as well as I want to add vibrancy Effect so that I can highlight my buttons and use them. I am trying to learn via apple docs and couple of tutorials but unable to get in the following steps I am doing are correct.
Steps 1. I am creating a blur view adding it as subview to present view so that it looks blur.
Step 2 . Then i am creating a vibrancy view for the blur effect and adding it to contentview of blurview.
But i am unable to get the blur effect, can anyone help me to understand
1. If the following steps are correct.
2. If not how should ideally the sequence be.
3. How to highlight those buttons and use them. ( I am attaching the snaphot of my storyboard too).
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIBlurEffect *blurEffect= [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];
UIVisualEffectView *blurView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
[blurView setUserInteractionEnabled:false];
[self.view addSubview:blurView];
UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];
UIVisualEffectView *vibrancyView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];
[vibrancyView setTranslatesAutoresizingMaskIntoConstraints:NO];
//[vibrancyView.contentView addSubview:s];
[blurView.contentView addSubview:vibrancyView];
}
The chief problem with your code is that you have neglected to give your blur view any size. Therefore it has zero size. Thus you will not see it do anything; it is, in effect, invisible. The most it can blur would be a single pixel behind it, and you are unlikely to notice that.
You are not setting the frame for your blurView and vibrancyView.
blurView.frame = self.view.frame;
vibrancyView.frame = self.view.frame;

Making transparent Circles in iOs

I want to create a black UIView with transparent circles.
I think about create one view (with black color and transparence 50%), and add multiple circles inside of it, but I don't know how to set the transparence for each. I know how to create a circle View (an example: how to draw a custom uiview that is just a circle iphone-app).
I want to do is something like iShowcase library but with multiple dots:
Any clue? thanks.
SOLVED
I took a look to the code of iShowcase library and I solved my probblem. now, I am working in a library based in iShowcase library.
I will post here when I finish it.
Please have a look of below link hope this will helpful for you.
Link : Here is Answer to set shadow in your view.
Use alpha for your circleView. As in your link example,then add as subviews in yourmainview:
UIView *circleView = [[UIView alloc] initWithFrame:CGRectMake(10,20,100,100)];
circleView.alpha = 0.5;
circleView.layer.cornerRadius = 50;
circleView.backgroundColor = [UIColor whiteColor];
[yourmainview addSubview: circleView];
Btw in your picture I think white circles have 100% alpha. You can use individual alpha for each circleView, or use a randomizer :)
As for updated example why don't you add more buttons and showcase in your h file, synthesize them and use multiple instances .... showcase setupShowcaseForTarget:btn_custom_1 title:#"title" details:#"other"]; ? I think you should modify main classes, becouse what you want are different containerView for multiple views [circles].
Using modifyed iShowcase.m [- (void) calculateRegion], and different views as containers, I was able to make something like: http://tinypic.com/view.php?pic=2iwao6&s=8#.VLPTRqYsRE8 So the answer is: use custom views for multiple showcase [ex [showcase2 setContainerView:self.view2];], then custom frame for each showcase [ showcase2.frame = CGRectMake(0,0,100,100);] I don;t habe time to fine tuning the example, but yes, you can achieve desired result...
I finally solved my question inspired by iShowCase library I did this simple class and Upload to github.
https://github.com/tato469/FVEasyShowCase
Simplest what you can do is to have your main view (black 50% transparant) and add shapes to the mask layer of that.
So basically:
//Set up your main view.
UIView* mainView = [UIView new];
mainView.backgroundColor = [UIColor blackColor];
mainView.alpha = 0.5;
UIView* circle1 = [YourCircleClassHere new];
UIView* circle2 = [YourCircleClassHere new];
UIView* circle3 = [YourCircleClassHere new];
UIView* container = [UIView new];
[UIView addSubview:circle1];
[UIView addSubview:circle2];
[UIView addSubview:circle3];
//Make a new layer to put images in to mask out
CALayer* maskLayer = [CALAyer layer];
//Assign the mask view to the contents layer.
maskLayer.contents = (id)container;
//This will set the mask layer to the top left corner.
maskLayer.frame = CGRectMake(0,0,container.frame.size.width,container.frame.size.height);
//Lastly you assign the layer to the mask layer of the main view.
mainView.layer.mask = maskLayer;
//Applies basically the same as clipToBounds, but a bit reversed..
mainView.layer.mask = true/false;
On a sidenote:
I achieved this with images "contents = (id) [UIImage CGImage]", but I'm sure it should work with UIViews as well.
Also mind some mistakes, since I just wrote this from my mind, also I didn't test this out.. So keep me updated if it works/!works ^_^

Resources