How to change alpha value of half UIImage or UIImageView

Question

I'm trying to create an animation effect when an image whose alpha value is 0.5 (approximately) at the beginning changes to 1 gradually, but does not look like a regular effect. Here is what I am looking for.

original image.

over time

over time

and in the end

So, basically, if the alpha value of a part of the image can be reduced, than I can show the animation of filling the glass or something close to it. I do not know if this can be done at all or if it is possible with the help of the main graphics or the main animation.

PS They are made in Photoshop.
Does anyone have any thoughts on what needs to be done to achieve such an animation?

Answer 1

I would suggest the following:

• Create a UIImageView displaying the image in the view.

• Create a new UIView with background color and transparency:

  UIView *transpView = [UIView new]; tranpsView.alpha = 0.4; transpView.frame = self.view.frame; [self.view addSubview:transpView]; 

• Animate the transparent view to move up:

   [UIView animateWithDuration:1.0 animations:^{ transpView.frame = CGRectOffset(transpView.frame, 0, -tranpsView.frame.size.height); }]; 

Remember to release the tranpsView after completion. Perhaps with a completed block.

To get a glass fill animation, just change the frame of tranpsView accordingly. tranpsView can be any subclass of UIView (e.g., fluid texture or something else).

Hope this helps.!

Answer 2

You can add a top view and change it. The best way.

If you use images, then the UIView header and implement

 -(void) drawRect:(CGRect) rect { //if you want to clip the image, the frame for the view must be smaller then rect [image drawInRect: rect]; } 

Answer 3

Here is another idea.

Set the background of your UIView *view to the image.png you want with alpha = 0.5. Let be

 w = view.bounds.size.width; h = view.bounds.size.height; 

Create another UIView *glassView also with alpha = 0.5 and add it as a preview:

 [view addSubview:glassView]; glassView.frame = CGRectMake(0.0, h, w, 0.0); 

Create a UIImageView *glassImageView and set its image to image.png , and then add it as a glassView :

 [glassView addSubview:glassImageView]; glassImageView.frame = CGRectMake(0.0, -h, w, h); 

Now adjust the animation to increase the height and alpha of the glassView , while maintaining the size of the imageGlassView , something like this:

 [UIView beginAnimations:nil context:NULL]; { [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; [UIView setAnimationDuration:1.0]; [UIView setAnimationDelegate:self]; glassView.alpha = 1.0; glassView.frame = CGRectMake(0.0, 0.0, w, h); glassImageView.frame = CGRectMake(0.0, 0.0, w, h); } [UIView commitAnimations]; 

To be fair, I have not tested this, but something in this direction seems like it might work. Again, maybe not. If you find the perfect solution, return it back. I would like to know how to do it!

Answer 4

See if it helps

http://www.iphonedevsdk.com/forum/iphone-sdk-development-advanced-discussion/32481-animating-uiimage-mask-fill.html

Answer 5

Well, I know that this question is quite old, and I am the one who asked it, but today I experimented with something similar and found this simple solution for my own question, which was asked 10 months ago.

I was working on a project that requires the image to look like it is loading from completely white, which is 0% progress to a completely red image, which is 100%.

I thought about adding 2 images containing images on top of each other, and set the content mode of the top image containing the image with red color from below so that when the image is reduced in size, it will be shown that the image is loading and it works. With some blocks of animation, the image is loaded. Then I thought about this question that I had been asking for so long, and then came up with a solution to my own problem.

So the solution to this question will be that if you add 2 imageViews to each other, then reduce the alpha value that is behind and reduce the height to zero, and then gradually increase the height and change the y coordinate of the image. which has an alpha value of 1, then it will load as asked in this question.

I used these two functions to get the illusion of loading an image.

 - (void)startAnimation { CGRect rect = loadedImageView.frame; rect.origin.y = unloadedImageView.frame.origin.y; rect.size.height = unloadedImageView.frame.size.height; [UIView beginAnimations:nil context:nil]; [UIView setAnimationDelegate:self]; [UIView setAnimationDuration:2.0f]; [UIView setAnimationDidStopSelector:@selector(stopAnimation)]; loadedImageView.frame = rect; [UIView commitAnimations]; } - (void)stopAnimation { CGRect rect = loadedImageView.frame; rect.origin.y = unloadedImageView.frame.size.height + unloadedImageView.frame.origin.y; rect.size.height = 0; [UIView beginAnimations:nil context:nil]; [UIView setAnimationDelegate:self]; [UIView setAnimationDuration:2.0f]; [UIView setAnimationDidStopSelector:@selector(startAnimation)]; loadedImageView.frame = rect; [UIView commitAnimations]; }