CAShapeLayer Анимация пути Глюки / Мерцания (от эллипса до прямой и обратно) - PullRequest
Новая
       28

CAShapeLayer Анимация пути Глюки / Мерцания (от эллипса до прямой и обратно)

8 голосов
/ 01 марта 2012

У меня возникает проблема, когда я создаю явную анимацию, чтобы изменить значение пути CAShapeLayer с эллипса на прямоугольник.

В моем контроллере холста я устанавливаю базовый CAShapeLayer и добавляю его вслой корневого представления: 

CAShapeLayer *aLayer;
aLayer = [CAShapeLayer layer];
aLayer.frame = CGRectMake(100, 100, 100, 100);
aLayer.path = CGPathCreateWithEllipseInRect(aLayer.frame, nil);
aLayer.lineWidth = 10.0f;
aLayer.strokeColor = [UIColor blackColor].CGColor;
aLayer.fillColor = [UIColor clearColor].CGColor;
[self.view.layer addSublayer:aLayer];

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

CGPathRef newPath = CGPathCreateWithRect(aLayer.frame, nil);
[CATransaction lock];
[CATransaction begin];
[CATransaction setAnimationDuration:5.0f];
CABasicAnimation *ba = [CABasicAnimation animationWithKeyPath:@"path"];
ba.autoreverses = YES;
ba.fillMode = kCAFillModeForwards;
ba.repeatCount = HUGE_VALF;
ba.fromValue = (id)aLayer.path;
ba.toValue = (__bridge id)newPath;
[aLayer addAnimation:ba forKey:@"animatePath"];
[CATransaction commit];
[CATransaction unlock];

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

Вот изображениеглюк: http://www.postfl.com/outgoing/renderingglitch.png

Видео того, что я испытываю, можно найти здесь: http://vimeo.com/37720876

Ответы [ 2 ]

7 голосов
/ 01 марта 2012

Я получил этот отзыв из списка разработчиков кварца:

Дэвид Дункан написал:

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

Чтобы сделать это, вам в основном нужно создать аналог прямоугольника, используя те же кривые, которые вы использовали бы для создания эллипса, но с параметрами, из-за которых рендеринг должен был бы выглядеть как прямоугольник.Это не должно быть слишком сложно (и опять же, вы можете использовать то, что вы получаете из CGPathApply по пути, созданному с помощью CGPathAddEllipseInRect в качестве руководства), но, вероятно, потребуется некоторая настройка, чтобы получить права.

5 голосов
/ 01 марта 2012

К сожалению, это ограничение удивительного свойства анимируемого пути CAShapeLayers.

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

Вы можете попытаться свести к минимуму эффект, нарисовав свой эллипс в виде 4 кривых вместо одного эллипса, но это все еще не совсем правильно.Я не нашел способ плавно перейти от кривых к полигонам.

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

...