анимация длины маски круглой стрелки в основной анимации

Посколькумой другой ответ (анимация двух уровней масок) имеет некоторые графические сбои, я решил попробовать перерисовать путь на каждом кадре анимации. Итак, сначала давайте напишем подкласс CALayer, который похож на CAShapeLayer, но просто рисует стрелку. Первоначально я попытался сделать его подклассом CAShapeLayer, но не смог заставить основную анимацию должным образом анимировать его.

В любом случае, вот интерфейс, который мы собираемся реализовать:

@interface ArrowLayer : CALayer

@property (nonatomic) CGFloat thickness;
@property (nonatomic) CGFloat startRadians;
@property (nonatomic) CGFloat lengthRadians;
@property (nonatomic) CGFloat headLengthRadians;

@property (nonatomic, strong) UIColor *fillColor;
@property (nonatomic, strong) UIColor *strokeColor;
@property (nonatomic) CGFloat lineWidth;
@property (nonatomic) CGLineJoin lineJoin;

@end

Свойство startRadians - это позиция (в радианы) конца хвоста. lengthRadians - это длина (в радианах) от конца хвоста до кончика наконечника стрелы. headLengthRadians - это длина (в радианах) наконечника стрелы.

Мы также воспроизводим некоторые свойства CAShapeLayer. Нам не нужно свойство lineCap, потому что мы всегда рисуем замкнутый путь.

Итак, как мы реализуем эту сумасшедшую вещь? Как это бывает, CALayer позаботится о сохранении любого старого свойства, которое вы хотите определить на подклассе . Итак, сначала, мы просто говорим компилятору, чтобы он не беспокоился о синтезе свойств:

@implementation ArrowLayer

@dynamic thickness;
@dynamic startRadians;
@dynamic lengthRadians;
@dynamic headLengthRadians;
@dynamic fillColor;
@dynamic strokeColor;
@dynamic lineWidth;
@dynamic lineJoin;

Но мы должны сказать Core Animation, что нам нужно перерисовать слой, если какие-либо из этих свойств изменятся. Для этого нам нужен список имен объектов недвижимости. Мы будем использовать Objective-C runtime для получения списка, поэтому нам не придется повторно вводить имена свойств. Нам нужно #import <objc/runtime.h> в верхней части файла, и тогда мы можем получить список следующим образом:

+ (NSSet *)customPropertyKeys {
    static NSMutableSet *set;
    static dispatch_once_t once;
    dispatch_once(&once, ^{
        unsigned int count;
        objc_property_t *properties = class_copyPropertyList(self, &count);
        set = [[NSMutableSet alloc] initWithCapacity:count];
        for (int i = 0; i < count; ++i) {
            [set addObject:@(property_getName(properties[i]))];
        }
        free(properties);
    });
    return set;
}

Теперь мы можем написать метод, который является основной анимацией использует, чтобы узнать, какие свойства должны вызвать перерисовку:

+ (BOOL)needsDisplayForKey:(NSString *)key {
    return [[self customPropertyKeys] containsObject:key] || [super needsDisplayForKey:key];
}

Также оказывается, что основная анимация будет делать копию нашего слоя в каждом кадре анимации. Нам нужно убедиться, что мы копируем все эти свойства, когда Core Animation делает копию:

- (id)initWithLayer:(id)layer {
    if (self = [super initWithLayer:layer]) {
        for (NSString *key in [self.class customPropertyKeys]) {
            [self setValue:[layer valueForKey:key] forKey:key];
        }
    }
    return self;
}

Нам также нужно сказать основной анимации, что мы должны перерисовать, если границы слоя изменяются:

- (BOOL)needsDisplayOnBoundsChange {
    return YES;
}

Наконец, мы можем перейти к самому главному-нарисовать стрелу. Во-первых, мы изменим графику начало контекста должно находиться в центре границ слоя. Затем мы построим путь, очерчивающий стрелку (которая теперь находится в центре начала координат). Наконец, мы будем заполнять и / или обводить путь соответствующим образом.

- (void)drawInContext:(CGContextRef)gc {
    [self moveOriginToCenterInContext:gc];
    [self addArrowToPathInContext:gc];
    [self drawPathOfContext:gc];
}

Перемещение начала координат в центр наших границ тривиально:

- (void)moveOriginToCenterInContext:(CGContextRef)gc {
    CGRect bounds = self.bounds;
    CGContextTranslateCTM(gc, CGRectGetMidX(bounds), CGRectGetMidY(bounds));
}

Построение пути стрелки не является тривиальным. Во-первых, нам нужно получить радиальное положение, в котором начинается хвост, радиальное положение, в котором заканчивается хвост и начинается наконечник стрелы, и радиальное положение наконечника стрелы. Мы будем использовать вспомогательный метод для вычисления этих трех радиальных положений:

- (void)addArrowToPathInContext:(CGContextRef)gc {
    CGFloat startRadians;
    CGFloat headRadians;
    CGFloat tipRadians;
    [self getStartRadians:&startRadians headRadians:&headRadians tipRadians:&tipRadians];

Затем нам нужно вычислить радиус внутренней и внешней дуг стрелы, а также радиус наконечника:

    CGFloat thickness = self.thickness;

    CGFloat outerRadius = self.bounds.size.width / 2;
    CGFloat tipRadius = outerRadius - thickness / 2;
    CGFloat innerRadius = outerRadius - thickness;

Нам также нужно знать, проводим ли мы внешнюю дугу по часовой стрелке или против часовой стрелки:

    BOOL outerArcIsClockwise = tipRadians > startRadians;

Внутренняя дуга будет нарисована в противоположном направлении.

, наконец, мы можем построить путь. Мы переместитесь к кончику наконечника стрелы, затем добавьте две дуги. Вызов CGPathAddArc автоматически добавляет прямую линию от текущей точки пути до начальной точки дуги, поэтому нам не нужно добавлять прямые линии самостоятельно:

    CGContextMoveToPoint(gc, tipRadius * cosf(tipRadians), tipRadius * sinf(tipRadians));
    CGContextAddArc(gc, 0, 0, outerRadius, headRadians, startRadians, outerArcIsClockwise);
    CGContextAddArc(gc, 0, 0, innerRadius, startRadians, headRadians, !outerArcIsClockwise);
    CGContextClosePath(gc);
}

Теперь давайте выясним, как вычислить эти три радиальных положения. Это было бы тривиально, за исключением того, что мы хотим быть изящными, когда длина головы больше, чем общая длина, путем отсечения длины головы к общей длине. Мы также хотим, чтобы позволить общая длина будет отрицательной, чтобы нарисовать стрелку в противоположном направлении. Мы начнем с определения начальной позиции, общей длины и длины головы. Мы будем использовать помощник, который зажимает длину головы, чтобы быть не больше, чем общая длина:

- (void)getStartRadians:(CGFloat *)startRadiansOut headRadians:(CGFloat *)headRadiansOut tipRadians:(CGFloat *)tipRadiansOut {
    *startRadiansOut = self.startRadians;
    CGFloat lengthRadians = self.lengthRadians;
    CGFloat headLengthRadians = [self clippedHeadLengthRadians];

Затем мы вычисляем радиальное положение, в котором хвост встречается с наконечником стрелы. Мы делаем это осторожно, так что если мы обрезали длину головы, мы точно вычисляем начальное положение. Это важно для того, чтобы при вызове CGPathAddArc с две позиции, это не добавляет неожиданную дугу из-за округления с плавающей запятой.

    // Compute headRadians carefully so it is exactly equal to startRadians if the head length was clipped.
    *headRadiansOut = *startRadiansOut + (lengthRadians - headLengthRadians);

Наконец, мы вычисляем радиальное положение наконечника стрелы:

    *tipRadiansOut = *startRadiansOut + lengthRadians;
}

Нам нужно написать помощник, который зажимает длину головы. Он также должен гарантировать, что длина головы имеет тот же знак, что и общая длина, поэтому вычисления выше работают правильно:

- (CGFloat)clippedHeadLengthRadians {
    CGFloat lengthRadians = self.lengthRadians;
    CGFloat headLengthRadians = copysignf(self.headLengthRadians, lengthRadians);

    if (fabsf(headLengthRadians) > fabsf(lengthRadians)) {
        headLengthRadians = lengthRadians;
    }
    return headLengthRadians;
}

Чтобы нарисовать путь в графическом контексте, нам нужно установить параметры заполнения и штриховки контекст, основанный на наших свойствах, а затем вызовите CGContextDrawPath:

- (void)drawPathOfContext:(CGContextRef)gc {
    CGPathDrawingMode mode = 0;
    [self setFillPropertiesOfContext:gc andUpdateMode:&mode];
    [self setStrokePropertiesOfContext:gc andUpdateMode:&mode];

    CGContextDrawPath(gc, mode);
}

Мы заполняем путь, если нам дали цвет заливки:

- (void)setFillPropertiesOfContext:(CGContextRef)gc andUpdateMode:(CGPathDrawingMode *)modeInOut {
    UIColor *fillColor = self.fillColor;
    if (fillColor) {
        *modeInOut |= kCGPathFill;
        CGContextSetFillColorWithColor(gc, fillColor.CGColor);
    }
}

Мы вычерчиваем путь, если нам дали цвет Штриха и ширину линии:

- (void)setStrokePropertiesOfContext:(CGContextRef)gc andUpdateMode:(CGPathDrawingMode *)modeInOut {
    UIColor *strokeColor = self.strokeColor;
    CGFloat lineWidth = self.lineWidth;
    if (strokeColor && lineWidth > 0) {
        *modeInOut |= kCGPathStroke;
        CGContextSetStrokeColorWithColor(gc, strokeColor.CGColor);
        CGContextSetLineWidth(gc, lineWidth);
        CGContextSetLineJoin(gc, self.lineJoin);
    }
}

Конец!

@end

Итак, теперь мы можем вернуться к контроллеру вида и использовать ArrowLayer в качестве маски вида изображения:

- (void)setUpMask {
    arrowLayer = [ArrowLayer layer];
    arrowLayer.frame = imageView.bounds;
    arrowLayer.thickness = 60;
    arrowLayer.startRadians = -M_PI_2;
    arrowLayer.lengthRadians = 0;
    arrowLayer.headLengthRadians = M_PI_2 / 8;
    arrowLayer.fillColor = [UIColor whiteColor];
    imageView.layer.mask = arrowLayer;
}

И мы можем просто анимировать свойство lengthRadians от 0 до 2 π:

- (IBAction)goButtonWasTapped:(UIButton *)goButton {
    goButton.hidden = YES;
    [CATransaction begin]; {
        [CATransaction setAnimationDuration:2];
        [CATransaction setCompletionBlock:^{
            goButton.hidden = NO;
        }];

        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"lengthRadians"];
        animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
        animation.autoreverses = YES;
        animation.fromValue = @0.0f;
        animation.toValue = @((CGFloat)(2.0f * M_PI));
        [arrowLayer addAnimation:animation forKey:animation.keyPath];
    } [CATransaction commit];
}

И мы получаем без сбоев анимация:

Я профилировал это на своем iPhone 4S под управлением iOS 6.0.1, используя основной инструмент анимации. Он, кажется, получает 40-50 кадров в секунду. Ваш пробег может варьироваться. Я попытался включить свойство drawsAsynchronously (новое в iOS 6), но это ничего не изменило.

Я загрузил код в этом ответе как суть для легкого копирования.