2016-07-03 4 views
1

Я создаю случайный UIBezierPath, указав путь к CAShapeLayer «s .path свойство, а затем анимировать CAShapeLayer» ход s так:CAShapeLayer shadowPath анимация. Как предотвратить заполнение тени при завершении анимации?

// Get a path 
    let path = createBezierPath() 

    // Shape layer properties 
    let color = randomCGColor() // Color of path and shadow 
    let lineWidth = CGFloat(arc4random_uniform(50) + 11) // Width of line and shadow radius 
    shapeLayer.path = path.CGPath 
    shapeLayer.lineJoin = kCALineJoinRound 
    shapeLayer.lineCap = kCALineCapRound 
    shapeLayer.strokeColor = color 
    shapeLayer.lineWidth = lineWidth 
    shapeLayer.fillColor = UIColor.clearColor().CGColor 
    // Shape layer shadow properties 
    shapeLayer.shadowPath = path.CGPath 
    shapeLayer.shadowColor = color 
    shapeLayer.shadowOffset = CGSizeZero 
    shapeLayer.shadowRadius = lineWidth 
    shapeLayer.shadowOpacity = 1.0 

    // Add shape layer 
    self.layer.addSublayer(shapeLayer) 

    // Stroke path animation 
    let pathAnimation: CABasicAnimation = CABasicAnimation(keyPath: "strokeEnd") 
    pathAnimation.fromValue = 0.0 
    pathAnimation.toValue = 1.0 

    // Shadow path animation 
    let shadowPathAnimation: CABasicAnimation = CABasicAnimation(keyPath: "shadowPath") 
    shadowPathAnimation.fromValue = 0.0 
    shadowPathAnimation.toValue = path.CGPath 

    // Animation group 
    let animationGroup = CAAnimationGroup() 
    animationGroup.duration = 5.0 
    animationGroup.animations = [pathAnimation, shadowPathAnimation] 

    shapeLayer.addAnimation(animationGroup, forKey: "allMyAnimations") 

Вопрос в том, когда анимация завершает тень применяется ко всей форме. Я хотел бы, чтобы тень просто применялась к штриху CAShapeLayer. Как я могу предотвратить тень от применения ко всей фигуре после завершения анимации?

Вот пример вопроса, я имею в виду:

enter image description here

ответ

4

Я был в состоянии решить эту проблему, с помощью this answer, создавая CALayer для тени и добавляя CAShapeLayer в качестве подслоя:

let path = createBezierPath() // Get a path 
    let color = randomCGColor() // Color of path and shadow 
    let lineWidth = CGFloat(arc4random_uniform(50) + 11) // Width of line and shadow radius 

    // Shape layer properties 
    shapeLayer.path = path.CGPath 
    shapeLayer.lineJoin = kCALineJoinRound 
    shapeLayer.lineCap = kCALineCapRound 
    shapeLayer.strokeColor = color 
    shapeLayer.lineWidth = lineWidth 
    shapeLayer.fillColor = UIColor.clearColor().CGColor 

    // Create shadow layer 
    let shadowLayer = CALayer() 
    shadowLayer.frame = self.bounds 
    shadowLayer.shadowColor = color 
    shadowLayer.shadowOffset = CGSizeZero 
    shadowLayer.shadowRadius = lineWidth 
    shadowLayer.shadowOpacity = 1.0 
    shadowLayer.backgroundColor = UIColor.clearColor().CGColor 
    shadowLayer.insertSublayer(shapeLayer, atIndex: 0) 

    // Add shadow layer 
    self.layer.addSublayer(shadowLayer) 

    // Stroke path animation 
    let pathAnimation: CABasicAnimation = CABasicAnimation(keyPath: "strokeEnd") 
    pathAnimation.fromValue = 0.0 
    pathAnimation.toValue = 1.0 
    pathAnimation.duration = 5.0 
    shapeLayer.addAnimation(pathAnimation, forKey: "strokeAnimation") 

    // Shadow path animation 
    let shadowPathAnimation: CABasicAnimation = CABasicAnimation(keyPath: "shadowPath") 
    shadowPathAnimation.fromValue = 0.0 
    shadowPathAnimation.toValue = path.CGPath 
    shadowLayer.addAnimation(shadowPathAnimation, forKey: "shadowAnimation") 

Пример результата:

enter image description here

+0

Hi. Это аккуратно. Я бы хотел сыграть с этим на детской площадке. Могу ли я поэкспериментировать с вашей функцией 'createBezierPath()'? – tymac

+0

@tymac here ya go: https://github.com/DanielStormApps/CreateRandomBezierPath –

+0

Спасибо @ daniel-storm! – tymac

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