Animazione di UIView mascherato, CALayer

Question

Sto cercando di ottenere quanto segue: L'utente tocca una vista, una circolare visualizza a sinistra di esso con alcuni contenuti di immagine in esso. La vista dovrebbe animare a partire dal punto di tocco fino alla cornice finale che si trova all'esterno della vista toccata ea sinistra. Durante l'animazione che dovrebbe essere un cerchio, crescendo nella giusta posizione e le dimensioni

Tutto funziona bene con il codice qui sotto, solo che durante l'animazione, confine circolare è solo sulla sinistra. È come se la forma CALayer scivoli nella sua cornice finale.

Sembra un po 'come questo.

Una volta completata l'animazione, ho il cerchio completo come previsto.

CGFloat w = 300; 
CGRect frame = CGRectMake(myX, myY, w, w); 
CGPoint p = [touch locationInView:self.imageView]; 
CGRect initialFrame = CGRectMake(p.x, p.y, 0,0); 
UIImageView *circle = [[UIImageView alloc] initWithFrame:frame]; 
circle.image = [UIImage imageNamed:@"china"]; 
circle.contentMode = UIViewContentModeScaleAspectFill; 
circle.backgroundColor = [UIColor clearColor]; 
circle.layer.borderWidth = 1; 
circle.layer.borderColor = [UIColor grayColor].CGColor; 
circle.layer.masksToBounds = YES; 

CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init]; 
CGRect maskRect = CGRectMake(0, 0, w, w); 
CGMutablePathRef path = CGPathCreateMutable(); 
CGPathAddEllipseInRect(path, nil, maskRect); 
maskLayer.path = path; 
CGPathRelease(path); 
circle.layer.mask = maskLayer; 

circle.frame = initialFrame; 
[self.imageView addSubview:circle]; 
[UIView animateWithDuration:1.0 animations:^{ 
    circle.frame = frame; 
}]; 

Ho provato solo lavorando con la cornerRadius del CALayer, ma che non porta a risultati soddisfacenti sia, come il raggio dovrebbe cambiare la dimensione del frame pure.

Answer 1

Si sta animando la cornice ma non la maschera. La maschera circolare rimane di dimensioni costanti e la cornice dell'immagine è animata da quella in alto a sinistra fino alla dimensione finale finale. Ecco perché ottieni il ritaglio circolare della parte in alto a sinistra dell'immagine, fino a raggiungere la dimensione finale del fotogramma.

Questo è ciò che accade sostanzialmente in dell'animazione:

Si può cercare di animare una trasformazione (che trasformerà l'immagine finale tagliata esattamente come si desidera guardare) invece di animare la cornice.

Qualcosa di simile:

// Don't animate the frame. Give it the finale value before animation. 
circle.frame = frame; 

// Animate a transform instead. For example, a scaling transform. 
circle.transform = CGAffineTransformMakeScale(0, 0); 
[UIView animateWithDuration:1.0 animations:^{ 
    circle.transform = CGAffineTransformMakeScale(1, 1); 
}]; 

Answer 2

Hai provato a giocare con l'autoresizingMask della vista circolare, consentendo di avere margini flessibili sinistro/destro?

Questo può giocare un ruolo nell'animazione e spiegare perché la tua vista sembra "scivolare". (Almeno vale la pena provare)