可以为 UISlider 的 UIImage Thumb 设置动画吗?

Posted

技术标签:

【中文标题】可以为 UISlider 的 UIImage Thumb 设置动画吗?【英文标题】:It is possible to animate UIImage Thumb of the UISlider? 【发布时间】:2014-12-07 13:28:56 【问题描述】:

我想在用户首次进入应用程序时为 UISlider 的拇指设置动画(闪烁)(以指示要点击的内容)。

我将 UIImage 设置为拇指:

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

我可以以某种方式对其进行动画处理(也许只是将此 UIImage 的 alpha 更改为动画)?

PS(这个播放按钮就是 UIImage)

【问题讨论】:

【参考方案1】:

我不相信您可以为图像的 alpha 值设置动画,而且我们无法访问拇指的图像视图(如果有的话)来为其 alpha 设置动画。您可以做的一件事是添加一个图像视图作为滑块的子视图,使其比拇指图像略大,并为其 alpha 值设置动画(它将在拇指图像的后面,因此它将显示为一个脉动环)。在这个例子中,我在 thumbRectForBounds:trackRect:value: 中设置了 image view 的 frame,并在 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;

【讨论】:

当我尝试从 StoryBoard 设置此子视图时,didMoveToWindow 似乎在视图显示之前执行,并且我立即调用了完成块。 (我刚刚创建了公共方法——startBlinking) @PaulBrewczynski,我不知道为什么会这样。我的测试应用程序在情节提要中有滑块,它工作正常。你的动画方法有和我一样的选项吗?您现在可以使用它(使用您的公共方法)吗?【参考方案2】:

如果您想要一次,请按照以下步骤操作。

    创建新的 UIImageView,比如说 fakeImageView。

    使用 UIViewAnimation 对其进行动画处理

    动画完成后,将其隐藏... (fakeImageView.hidden = YES)

UIViewAnimation 教程请访问here 或here

【讨论】:

这是一种很好的 hackish 方式。不是很可定制,但很好的hack。谢谢。 @PaulBrewczynski :我看到您很少将任何问题的答案标记为已接受的答案...如果您将任何答案标记为已接受,如果该答案解决了您的问题,那就太好了... 这就是 SO 的工作原理...【参考方案3】:

除了没有拇指图像外,您可以制作滑块的精确副本,并将其放在第一个滑块下方。然后为整个第一个滑块的 alpha 设置动画,理论上应该给人的印象是只为拇指设置动画;-) 动画完成后,您可以删除第二个滑块。

【讨论】:

【参考方案4】:

您可以访问 UISlider object.subviews。通常(不保证)第三个元素(应该是 .lastObject)是拇指图像的 UIImageView。

【讨论】:

Nope ...... (lldb) po slider ▿ 可选 - some : ;值:0.500000> (lldb) po slider.subviews 0 个元素

以上是关于可以为 UISlider 的 UIImage Thumb 设置动画吗?的主要内容,如果未能解决你的问题,请参考以下文章

将 UIImage 作为“刻度线”添加到 UISlider

使用 UISlider 将 UIImage 更改回原始图像的问题

修改自定义 UISlider

更改 UISlider thumbImage 的大小

为啥我无法使用 UISlider 降低亮度?

UISlider - 将 UILabel 添加到最小/最大 UIImageView?