Search code examples
ios5ios6

Why is this only fading In and not fading out


I have an image on the UIButton that I wish to glow in when I click button and glow out when I click it again.

Everytime I click, it doesn't glow out, it only glows in making it brighter . I have tried UIView animateWithDuration as well as CATransition and CABasicAnimation..

Something is wrong. Probably something basic that I should know about.

I'd appreciate the help.

Heres my code:

-(void)didTapButton:(UIButton *)button {

button.selected = !button.selected;

UIColor *glowColor = [self.arrayOfGlowColor objectAtIndex:button.tag];
UIImageView *imageView = button.imageView;
UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, [UIScreen mainScreen].scale);
[imageView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0,0,imageView.bounds.size.width,imageView.bounds.size.height)];
[glowColor setFill];
[path fillWithBlendMode:kCGBlendModeSourceAtop alpha:1.0];

UIImage *imageContext_image = UIGraphicsGetImageFromCurrentImageContext();

UIView *glowView = [[UIImageView alloc] initWithImage:imageContext_image];
glowView.center = imageView.center;
[imageView.superview insertSubview:glowView aboveSubview:imageView];

glowView.alpha = 0;
glowView.layer.shadowColor = glowColor.CGColor;
glowView.layer.shadowOffset = CGSizeZero;
glowView.layer.shadowRadius = 10;
glowView.layer.shadowOpacity = 1.0;

/*
[UIView animateWithDuration: 1.0 animations:^(void) {
    glowView.alpha = (button.selected) ? 1.0 : 0.0f;
}];
NSLog(@"glowView.alpha:%f",glowView.alpha);
NSLog(button.selected ? @"YES" : @"NO");
*/
/*


if (button.selected) {
    CATransition *fadeIn = [CATransition animation];
    fadeIn.duration = 1.0;
    fadeIn.startProgress = 0.0f;
    fadeIn.endProgress = 1.0f;
    [fadeIn setType:kCATransitionFade];
    fadeIn.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    [fadeIn setFillMode:@"extended"];
    [glowView.layer addAnimation:fadeIn forKey:nil];

}

if (!button.selected) {
    CATransition *fadeOut = [CATransition animation];
    fadeOut.duration = 1.0;
    fadeOut.startProgress = 1.0f;
    fadeOut.endProgress = 0.0f;

    [fadeOut setType:kCATransitionFade];
    fadeOut.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    [fadeOut setFillMode:@"extended"];
    [glowView.layer addAnimation:fadeOut forKey:nil];

}
*/


if (button.selected) {

//Create a one-way animation that fades in the glow.
    glowView.layer.opacity = 1.0;
CABasicAnimation *glowFadeInAnim = [CABasicAnimation animationWithKeyPath:@"opacity"];
glowFadeInAnim.fromValue = [NSNumber numberWithDouble:0.0];
glowFadeInAnim.toValue = [NSNumber numberWithDouble:1.0];

glowFadeInAnim.repeatCount = 1;
glowFadeInAnim.duration = 1.0;
glowFadeInAnim.autoreverses = FALSE;
    glowFadeInAnim.fillMode = kCAFillModeForwards;
    glowFadeInAnim.removedOnCompletion = NO;
glowFadeInAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];


[glowView.layer addAnimation:glowFadeInAnim forKey:nil];
}


if (!button.selected) {
            glowView.layer.opacity = 1.0;
    CABasicAnimation *glowFadeOutAnim = [CABasicAnimation animationWithKeyPath:@"opacity"];
    glowFadeOutAnim.fromValue = [NSNumber numberWithDouble:1.0];
    glowFadeOutAnim.toValue = [NSNumber numberWithDouble:0.0];

    glowFadeOutAnim.repeatCount = 1;
    glowFadeOutAnim.beginTime = 2;
    glowFadeOutAnim.duration = 2.0;
    glowFadeOutAnim.autoreverses = FALSE;
    glowFadeOutAnim.fillMode = kCAFillModeForwards;
    glowFadeOutAnim.removedOnCompletion = NO;
    glowFadeOutAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];


    [glowView.layer addAnimation:glowFadeOutAnim forKey:nil];
            glowView.layer.opacity = 0.0;
}

NSLog(@"glowView.opacity:%f",glowView.layer.opacity);
NSLog(button.selected ? @"YES" : @"NO");

}


Solution

  • If you create a new glowView every time the button is pressed and add it to the button, then obviously it will just keep getting brighter, as more and more of them are being added to the button. You need to create the glowView once, for example in your viewDidLoad method, and store it as an instance variable so you don't lose it:

    @interface MyViewController : UIViewController {
        UIView *_glowView;
    }
    
    ...
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        _glowView = ... // Initialise it here
        ...
        [imageView.superview insertSubview:_glowView aboveSubview:imageView];
    }
    

    Then in your didTapButton: method, you handle the tap as you do (adding or removing the _glowView, but make sure you don't set it to nil so the reference to it is always retained). This way, you only create and add it once, and the problem should be solved.