2016-07-03 3 views
1

나는 CAShapeLayer.path 재산, 다음에 생기를 불어 CAShapeLayer의 뇌졸중과 같이 경로를 설정, 임의의 UIBezierPath을 만드는거야 : 애니메이션이 그림자가 완료되면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

나는 그림자에 대한 CALayer를 만들고 추가하여, this answer의 도움으로 문제를 해결할 수 있었다 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

안녕하세요. 이것은 산뜻합니다. 놀이터에서 이걸 가지고 놀고 싶습니다. 'createBezierPath()'함수를 실험해볼 수 있을까요? – tymac

+0

@tymac 여기 있습니다. https://github.com/DanielStormApps/CreateRandomBezierPath –

+0

@ daniel-storm! 감사합니다. – tymac

관련 문제