Анимация на маскирани UIView, CALayer - iphone, ios, ipad, анимация, calayer

Опитвам се да постигна следното: Потребителят задейства изгледа, а кръгъл изглед се появява вляво от него с малко изображениесъдържанието в него. Изгледът трябва да се анимира, като се започне от точката на докосване до крайната рамка, която е извън докосвания изглед и наляво. По време на анимацията трябва да е кръг, растат в правилната позиция и размер

Всичко работи добре с кода по-долу, само това по време на анимацията, кръгла граница е само вляво. Това е като CALayer формата се плъзга в крайната си рамка.

Изглежда нещо подобно.

След като анимацията завърши, имам пълен кръг, както се очакваше.

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

Опитвах се просто да работя с cornerRadius от CALayer, но това също не води до задоволителни резултати, тъй като радиусът ще трябва да се промени и с размера на рамката.

Отговори:

Оживявате рамката, но не и маската. Циркулярната маска остава постоянна по размер и рамката на изображението ви се анимира от горната лява част до финала на пълен размер. Ето защо вие получавате кръговото отрязване на горната лява част на изображението, докато достигне финалния размер на рамката.

Това е, което основно се случва във вашата анимация:

Можете да опитате да анимирате трансформация (която ще трансформира окончателно изрязаното изображение точно както искате да изглежда), вместо да анимирате рамката.

Нещо като:

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

Опитали ли сте да играете с "autoresizingMask" на кръговия изглед, което му позволява да има гъвкав ляв / десен марж?

Това може да играе роля в анимацията и да обясни защо изглежда, че вашият изглед "се плъзга". (Най-малкото си струва да опитате)