It is possible to animate UIImage Thumb of the UISlider?

Question

I would like to to animate (blink) thumb of the UISlider when user first enter the app (to indicate what to click).

I set UIImage as a thumb :

[self.textNavigationSlider setThumbImage:thumbImage forState:UIControlStateNormal];

Can I somehow animate it (maybe just change alpha of this UIImage as animation) ?

PS (This play button is the UIImage)

Answer 1

I don't believe you can animate the alpha value of an image, and we don't have access to an the thumb's image view (if it has one) to animate its alpha. One thing you can do is add an image view as a subview of the slider, and make it slightly bigger than the thumb image, and animate its alpha value (it will be behind the thumb's image, so it will show up as a pulsating ring). In this example, I set the image view's frame in thumbRectForBounds:trackRect:value:, and cancel the animation in touchesBegan,

@interface RDSlider ()
@property (strong, nonatomic) UIImageView *iv;
@end

@implementation RDSlider // subclass of UISlider

-(void)awakeFromNib {
    self.minimumTrackTintColor = [UIColor colorWithRed:75/255.0 green:180/255.0 blue:150/255.0 alpha:1];
    self.maximumTrackTintColor = [UIColor colorWithRed:50/255.0 green:120/255.0 blue:100/255.0 alpha:1];
    [self setThumbImage:[self createThumbImage] forState:UIControlStateNormal];
    self.iv = [UIImageView new];
    self.iv.backgroundColor = [UIColor greenColor];
    [self addSubview:self.iv];
}


-(void)didMoveToWindow {
    [UIView animateWithDuration:.6 delay:0 options:UIViewAnimationOptionAutoreverse|UIViewAnimationOptionTransitionCrossDissolve|UIViewAnimationOptionRepeat|UIViewAnimationOptionCurveEaseInOut animations:^{
        self.iv.alpha = 0;
    } completion:^(BOOL finished) {
        [self.iv removeFromSuperview];
        self.iv = nil;
    }];
}



-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    [self.iv.layer removeAllAnimations]; // calling this causes the animation's completion block to be executed
    [super touchesBegan:touches withEvent:event];
}



- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value {
    CGRect thumbRect = [super thumbRectForBounds:bounds trackRect:rect value:value];
    self.iv.frame = CGRectInset(thumbRect,-2,-2);
    self.iv.layer.cornerRadius = self.iv.frame.size.width/2.0;
    self.iv.layer.masksToBounds = YES;
    return thumbRect;
}


-(UIImage *) createThumbImage {
    UIBezierPath *border = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 28, 28)];
    UIBezierPath *center = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(.5, .5, 27, 27)];
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(border.bounds.size.width, border.bounds.size.height), NO, 0.0);
    [self.minimumTrackTintColor setFill];
    [border fill];
    [[UIColor whiteColor] setFill];
    [center fill];
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return img;
}