2016-08-18 5 views
7

Проблема
Я создаю эффект взрывающихся колец. Я использую несколько CAShapeLayer и создаю UIBezierPath для каждого слоя. Когда представление инициализировано, все слои имеют путь с шириной 0. Когда действие запускается, кольца ожидают более крупный путь.Странное поведение при анимации между двумя круговыми UIBezierPaths

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

Demo
Video

Код

Нанесение слоев:

func draw(inView view: UIView) -> CAShapeLayer { 

    let shapeLayer = CAShapeLayer() 

    // size.width defaults to 0 
    let circlePath = UIBezierPath(arcCenter: view.center, radius: size.width/2, startAngle: 0, endAngle: CGFloat(360.0).toRadians(), clockwise: true) 

    shapeLayer.path = circlePath.CGPath 
    shapeLayer.frame = view.frame 

    return shapeLayer 
} 

Обновление слоев

func updateAnimated(updatedOpacity: CGFloat, updatedSize: CGSize, duration: CGFloat) { 

    let updatePath = UIBezierPath(arcCenter: view.center, radius: updatedSize.width/2, 
            startAngle: 0, endAngle: CGFloat(360).toRadians(), clockwise: true) 

    let pathAnimation = CABasicAnimation(keyPath: "path") 
    pathAnimation.fromValue = layer.path // the current path (initially with width 0) 
    pathAnimation.toValue = updatePath.CGPath 


    let opacityAnimation = CABasicAnimation(keyPath: "opacity") 
    opacityAnimation.fromValue = self.opacity 
    opacityAnimation.toValue = updatedOpacity 


    let animationGroup = CAAnimationGroup() 
    animationGroup.animations = [pathAnimation, opacityAnimation] 
    animationGroup.duration = Double(duration) 
    animationGroup.fillMode = kCAFillModeForwards 
    animationGroup.removedOnCompletion = false 

    layer.addAnimation(animationGroup, forKey: "shape_update") 

    ... update variables ... 

} 

ответ

3

Избегайте запуска с ширины пути 0. Очень сложно масштабировать от 0, а крошечные ошибки с плавающей точкой увеличиваются. Значения, очень близкие к нулю, не очень непрерывны в плавающей точке (хммм .... я думаю, что на самом деле это немного похоже на реальную вселенную). Попробуйте начать с более крупных значений и посмотрите, как близко к нулю вы можете безопасно идти.

+0

Установка начального значения ширины в 1 вместо 0, похоже, решила его, спасибо за вашу помощь! – Ollie

Смежные вопросы