How to animate image alpha

Discussion in 'iOS Development' started by cybohemia, Jan 29, 2009.

  1. cybohemia

    cybohemia New Member

    Joined:
    Jan 25, 2009
    Messages:
    49
    Likes Received:
    0
    Device:
    iPhone 3G (Black)
    I have two overlapping images displayed on a view and I'd like to animate the alpha of the top image.

    When I animate the alpha in the view, both images in the view fade - I only want the top image to fade but I don't know how to animate the alpha just for the one image.

    Is there a way to do that?
  2. Steaps

    Steaps New Member

    Joined:
    Oct 24, 2007
    Messages:
    5,074
    Likes Received:
    41
    Device:
    iPod touch
    Are you looking for one image to fade to the other? Or just change the alpha of the one image?
  3. SkylarEC

    SkylarEC Super Moderator Emeritus Staff Member

    Joined:
    Sep 19, 2007
    Messages:
    6,642
    Likes Received:
    129
    [UIView beginAnimations:nil context:NULL];
    theTopView.alpha = (theTopView.alpha != 1 ? 1 : 0);
    [UIView commitAnimations];
  4. cybohemia

    cybohemia New Member

    Joined:
    Jan 25, 2009
    Messages:
    49
    Likes Received:
    0
    Device:
    iPhone 3G (Black)
    I'm looking to just change the alpha of the one image - not a cross fade.
    ------------------double post merged------------------
    I'm actually using one UIView, within which are two images being drawn by drawRect method.
  5. Steaps

    Steaps New Member

    Joined:
    Oct 24, 2007
    Messages:
    5,074
    Likes Received:
    41
    Device:
    iPod touch
    Try what Skylar posted first, he's better at this. But here is my guess:
    Code:
    		[UIView beginAnimations:nil context: nil];
    		[UIView setAnimationDelegate: self];
    		[UIView setAnimationDuration: 0.5];
    		[UIView setAnimationCurve: UIViewAnimationCurveEaseInOut];
    		yourImage.alpha = 0;
    		[UIView commitAnimations];
    
  6. SkylarEC

    SkylarEC Super Moderator Emeritus Staff Member

    Joined:
    Sep 19, 2007
    Messages:
    6,642
    Likes Received:
    129
    There are a couple of options. Here are the first two that came to mind.

    • Don't draw both images into the same view with DrawRect. Add them as UIImageView subviews of the original view. This would certainly be the easiest way to take care of your problem. You can use UIView animations to animate the fade.
    • Create a mask and draw the second image directly onto that mask. Create a timer that when fired sets a float somewhere between 1.0 and 0.0. I'd use a constant float, but an ivar is just as good. Subtract 1 / timesTimerWillFire from this float. If the value after subtracting is <= 0, set the value to 0, invalidate the timer. After each iteration, call [theView setNeedsDisplay] (possibly [self setNeedsdisplay], depending on how you have this set up. The drawRect method will redraw the view, and will set the opacity of the mask to whatever the value is that your timer just set.
  7. cybohemia

    cybohemia New Member

    Joined:
    Jan 25, 2009
    Messages:
    49
    Likes Received:
    0
    Device:
    iPhone 3G (Black)
    I tried the myImage.alpha = 0 but it hadn't worked.

    The subviews sound good but I'm still too much of a noob to figure out how to do that. I tried dragging in another UIImageView into the IB's File's Owner which already has the current UIView but I don't know how to connect two views to the File's Owner. Is this something I'll have to do programmatically?

Share This Page