【问题标题】:CAShapeLayer shadowPath animation. How to prevent shadow fill on animation completion?CAShapeLayer shadowPath 动画。如何防止动画完成时的阴影填充?
【发布时间】:2016-07-03 23:32:43
【问题描述】:

我正在创建一个随机的UIBezierPath,将路径设置为CAShapeLayer.path 属性,然后像这样为CAShapeLayer 的笔划设置动画:

    // 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 的笔划。 如何防止动画完成后阴影应用到整个形状?

这是我所指问题的一个示例:

【问题讨论】:

    标签: swift cashapelayer quartz-core caanimation


    【解决方案1】:

    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")
    

    结果示例:

    【讨论】:

    • 嗨。这很整洁。我想在操场上玩这个。我可以试验一下你的createBezierPath() 函数吗?
    • 谢谢@daniel-storm!
    猜你喜欢
    • 2011-08-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多