Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how change the alpha value of half of UIImage or UIImageView

I am trying to create an animation effect where an image who's alpha value is 0.5 (approximately) at start changes to 1 gradually, but not like the conventional effect. Here is what I am looking for.

original Image.

enter image description here

after some time

enter image description here

after some more time

enter image description here

and at the end

enter image description here

So basically if the alpha value of part of the image can be reduced than I can show the animation of filling up a glass or something close to it.
I don't know if this can be done at all or if it's possible with core graphics or core animation.

P.S. They are made in photoshop.
Does anyone have any thoughts about what should be done to achieve this kind of animation?

like image 248
Robin Avatar asked Dec 10 '22 10:12

Robin


1 Answers

I'd suggest the following:

  1. Create the UIImageView that shows the image in the view.
  2. Create a new UIView with a background color and transparency:

    UIView *transpView = [UIView new];
    tranpsView.alpha = 0.4;
    transpView.frame = self.view.frame;
    [self.view addSubview:transpView];
    
  3. Animate the transparent view to slide upwards:

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

Don't forget to release the tranpsView after you are done. Possibly with the completed block.

To get the "glass filling up" type of animation, just change the frame of of the tranpsView accordingly. The tranpsView can be any UIView subclass (like a texture of liquid or something).

Hope that helps.!

like image 131
BastiBen Avatar answered Dec 11 '22 22:12

BastiBen