Animación de UIView enmascarado, CALayer

Question

Estoy tratando de lograr lo siguiente: El usuario toca en una vista, aparece una vista circular a la izquierda con contenido de imagen. La vista debe animarse desde el punto de contacto hasta el fotograma final que está fuera de la vista tocada y hacia la izquierda. Durante la animación que debería ser un círculo, con un crecimiento en la posición y tamaño correctos

Todo funciona bien con el código de abajo, solo que durante la animación, límite circular es sólo en la izquierda. Es como si la forma CALayer se deslizara en su marco final.

Parece algo así.

Una vez que la animación completa, tengo el círculo completo como se esperaba.

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; 
}]; 

He tratado simplemente trabajar con el cornerRadius del CALayer, pero que no conduce a resultados satisfactorios, ya sea, como el radio tendría que cambiar el tamaño de la trama también.

Answer 1

Estás animando el marco pero no la máscara. La máscara circular permanece constante en tamaño y el marco de la imagen está animado desde la parte superior izquierda hasta el final a tamaño completo. Es por eso que obtienes el recorte circular de la parte superior izquierda de la imagen, hasta que llega al tamaño de marco final.

Esto es lo que ocurre básicamente en la animación:

Usted puede tratar de animar una transformación (que transformará la imagen final recortado exactamente como usted quiere que se vea) en lugar de animar el marco.

Algo así como:

// 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

¿Intentó jugar con el aumento automático de la vista en círculo, lo que le permite tener márgenes flexibles izquierdo/derecho?

Esto puede desempeñar un papel en la animación y explicar por qué su vista parece "deslizarse". (Al menos vale la pena intentarlo)