ios - 如何用效果动画在数字(文本)周围画一个圆圈？

Question

像 Foursquare 评分一样使用 Quartz 2D:

Please see link; look for the green circle ，例如。

提前致谢。

 (void)drawRect:(CGRect)rect {

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, 4.0);
    CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);
    UIColor *theFillColor = [UIColor greenColor];
    CGContextSetFillColorWithColor(context, theFillColor.CGColor);
    CGRect rectangle = CGRectMake(50.0,150.0,rect.size.width-10.0,rect.size.height-10.0);
    CGContextBeginPath(context);
    CGContextAddEllipseInRect(context, rectangle);
    CGContextDrawPath(context, kCGPathFillStroke); // Or kCGPathFill
    CGRect smallRect = CGRectInset(rectangle, 40, 40);
    CGContextBeginPath(context);
    CGContextAddEllipseInRect(context, smallRect);
    CGContextDrawPath(context, kCGPathFillStroke); // Or kCGPathFill
    UIGraphicsEndImageContext();
}

从未调用 drow rect 我正在从 xib 加载 UI？

Answer 1

这是我创建的示例类。它不是真正的“动画”，但给出了一个正确的外观:

#import <UIKit/UIKit.h>
@interface MSSNumberWithCircleView : UIView {

}
@property (assign, nonatomic) NSInteger  number;
@property (strong, nonatomic) UIColor   *circleColor;
@property (strong, nonatomic) UIColor   *numberColor;
@property (strong, nonatomic) UIFont    *numberFont;
- (id)initWithNumber:(NSInteger)number numberFont:(UIFont *)numberFont numberColor:(UIColor *)numberColor circleColor:(UIColor *)circleColor;
@end

// Header import
#import "MSSNumberWithCircleView.h"
// Other imports

@interface MSSNumberWithCircleView () {

}
@property (assign, nonatomic) CGFloat angle;
@property (assign, nonatomic) CGFloat animationDuration;
@property (assign, nonatomic) CGFloat animationFrames;
+ (NSInteger)defaultNumber;
+ (UIColor *)defaultCircleColor;
+ (UIColor *)defaultNumberColor;
+ (UIFont *)defaultNumberFont;
@end
@implementation MSSNumberWithCircleView
#pragma mark - Class Methods (Default Property Values)
+ (NSInteger)defaultNumber {
    return 1;
}
+ (UIColor *)defaultCircleColor {
    static UIColor *defaultColor = nil;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        defaultColor = [UIColor colorWithRed:136.0f/255.0f 
                                       green:190.0f/255.0f 
                                        blue:050.0f/255.0f 
                                       alpha:1.0f];
    });
    return defaultColor;
}
+ (UIColor *)defaultNumberColor {
    static UIColor *defaultColor = nil;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        defaultColor = [UIColor whiteColor];
    });
    return defaultColor;
}
+ (UIFont *)defaultNumberFont {
    static UIFont *defaultFont = nil;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        defaultFont = [UIFont fontWithName:@"HelveticaNeue-Light" size:240.0f];
    });
    return defaultFont;
}
#pragma mark - Initialization Methods
- (id)init {
    self = [super init];
    if (self != nil) {
        [self defaultSetup];
    }
    return self;
}
- (id)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self != nil) {
        [self defaultSetup];
    }
    return self;
}
- (id)initWithNumber:(NSInteger)number numberFont:(UIFont *)numberFont numberColor:(UIColor *)numberColor circleColor:(UIColor *)circleColor {
    self = [super init];
    if (self != nil) {
        self.circleColor        = circleColor;
        self.numberColor        = numberColor;
        self.numberFont         = numberFont;
        self.number             = number;
    }
    return self;
}
- (void)defaultSetup {
    self.angle              = 0;
    self.animationDuration  = 0.4f;
    self.animationFrames    = 30;
    self.circleColor        = [MSSNumberWithCircleView defaultCircleColor];
    self.numberColor        = [MSSNumberWithCircleView defaultNumberColor];
    self.numberFont         = [MSSNumberWithCircleView defaultNumberFont];
    self.number             = [MSSNumberWithCircleView defaultNumber];
}
- (void)drawRect:(CGRect)rect {

    self.angle = self.angle + (2 * M_PI / self.animationFrames);

    CGContextRef context    = UIGraphicsGetCurrentContext();

    CGFloat circleSide      = MIN(rect.size.height, rect.size.width);
    CGFloat xOffset         = (rect.size.width  - circleSide) / 2.0f;
    CGFloat yOffset         = (rect.size.height - circleSide) / 2.0f;

    CGRect circleRect       = CGRectMake(xOffset, yOffset, circleSide, circleSide);
    CGPoint circleCenter    = CGPointMake(CGRectGetMidX(circleRect), CGRectGetMidY(circleRect));

    CGRect textRect         = CGRectInset(circleRect, circleSide * 0.1f, circleSide * 0.1f);
    CGFloat textSide        = textRect.size.width;

    [self.circleColor setFill];

    CGContextMoveToPoint(context, circleCenter.x, circleCenter.y);
    CGContextAddArc(context, circleCenter.x, circleCenter.y, circleSide / 2.0f, 0, self.angle, NO);
    CGContextFillPath(context);

    NSString *numberString  = [NSString stringWithFormat:@"%d", (int)self.number];
    NSMutableParagraphStyle *style = [[NSParagraphStyle defaultParagraphStyle] mutableCopy];
    style.alignment = NSTextAlignmentCenter;
    NSDictionary *drawDict  = @{NSFontAttributeName: self.numberFont, NSParagraphStyleAttributeName: style};

    CGSize size             = [numberString boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT)
                                                     options:NSStringDrawingTruncatesLastVisibleLine | NSStringDrawingUsesLineFragmentOrigin
                                                  attributes:drawDict
                                                         context:nil].size;
    CGFloat fontSize        = self.numberFont.pointSize;
    CGFloat measuredSide    = MAX(size.width, size.height);

    fontSize                = fontSize * (textSide / measuredSide);

    self.numberFont         = [self.numberFont fontWithSize:fontSize];
    drawDict                = @{NSFontAttributeName: self.numberFont, NSParagraphStyleAttributeName: style, NSForegroundColorAttributeName: self.numberColor};

    [numberString drawWithRect:textRect
                       options:NSStringDrawingTruncatesLastVisibleLine | NSStringDrawingUsesLineFragmentOrigin
                    attributes:drawDict
                       context:nil];

    if (self.angle <= (2 * M_PI)) {
        [self performSelector:@selector(setNeedsDisplay) withObject:nil afterDelay:(self.animationDuration / self.animationFrames)];

    } else {
        self.angle = 0;

    }
}
@end

基本上，更改您的属性以调整动画的持续时间。我将这些值设为私有(private)，但如果您希望它们可公开访问，您可以将它们放在标题中。另外，我从您发布的页面中提取了 defaultNumberColor 。

此外，这旨在从您在 Interface Builder 中设置的 View 的较短边生成一个正方形(作为圆的边界)。然后它将使正方形在 View 中居中。该类的设计使得对 -setNeedsDisplay 的调用将触发整个动画，这将在完成后为下一个动画“重置”该类。