Как оживить заполнение CAShapeLayer?

Question

У меня есть круговой CAShapeLayer, что я хотел бы оживить заполнение. Я создал свой CAShapeLayer, как

- (void)viewDidLoad { 
    [super viewDidLoad]; 

    // Filled layer 
    CAShapeLayer *filledCircleShape = [CAShapeLayer new]; 
    filledCircleShape.frame = CGRectMake(100, 100, 100, 100); 
    filledCircleShape.fillColor = [UIColor purpleColor].CGColor; 
    filledCircleShape.strokeColor = [UIColor grayColor].CGColor; 
    filledCircleShape.lineWidth = 2; 
    filledCircleShape.path = [self filledBezierPathWithRelativeFill:.75 inFrame:filledCircleShape.frame].CGPath; 
    [self.view.layer addSublayer:filledCircleShape]; 

    self.filleShapeLayer = filledCircleShape; 
} 

- (UIBezierPath *)filledBezierPathWithRelativeFill:(CGFloat)relativeFill 
{ 
    UIBezierPath *filledCircleArc = [UIBezierPath bezierPath]; 
    CGFloat arcAngle = 2 * acos(1 - 2 * relativeFill); // 2arccos ((r - 2rp)/r) == 2 arccos(1 - 2p) 
    CGFloat startAngle = (M_PI - arcAngle)/2; 
    CGFloat endAngle = startAngle + arcAngle; 
    [filledCircleArc addArcWithCenter:self.boundsCenter radius:self.radius startAngle:startAngle endAngle:endAngle clockwise:YES]; 

    return filledCircleArc; 
} 

Это выглядит следующим образом:

Я попытался следующие действия, чтобы сделать анимацию изменения пути.

- (void)animate 
{ 
    UIBezierPath *toBezierPath = [self filledBezierPathWithRelativeFill:0.3 inFrame:CGRectMake(100, 100, 100, 100)]; 
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"]; 
    pathAnimation.duration = 5.f; 
    pathAnimation.toValue = (__bridge id)toBezierPath.CGPath; 
    [self.filleShapeLayer addAnimation:pathAnimation forKey:@"path"]; 
} 

какой вид работ. Слой формы одухотворяет, но выглядит как этот

Я хочу слой формы для анимации, как песочные, начиная с одного процент, а затем оживляет вниз к другому.

Любые идеи о том, как я могу достичь этого, используя CAShapeLayer?

Answer 1

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