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

If you want it for one time follow below steps.

1. Create new UIImageView let's say fakeImageView.

2. Animate it using UIViewAnimation

3. Once animation is done, hide it... (fakeImageView.hidden = YES)

For UIViewAnimation tutorial, visit here or here

Answer 2

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;
}

Answer 3

You could make an exact copy of the slider, except for no thumb image, and put it underneath the first one. Then animate the alpha of the whole first slider, which should give the impression of only animating the thumb, in theory ;-) When animation is completed, you can delete the second slider.

Answer 4

You can access the UISlider object.subviews. Usually (not guaranteed) the third element (which should be the .lastObject) is the UIImageView for the thumb image.