CODEWITHSUNDEEP
iosobjective-ciphoneipaduislider
Paweł Brewczynski
Paweł Brewczynski

Reputation: 2743

It is possible to animate UIImage Thumb of the UISlider?

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) ?

This slider

PS (This play button is the UIImage)

Upvotes: 0

Views: 1957

Answers (4)

Martin Mlostek
Martin Mlostek

Reputation: 2960

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.

Upvotes: 0

Bjørn Egil
Bjørn Egil

Reputation: 2458

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.

Upvotes: 1

Fahim Parkar
Fahim Parkar

Reputation: 31627

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

Upvotes: 1

rdelmar
rdelmar

Reputation: 104082

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

Upvotes: 1

Related Questions