Layer Animation(四)

Wednesday, March 21, 2018

Gradient Animations

  • 今天主要讲一下渐变动画,看看效果图 [WPGP gif_id="131” width="400”]

  • 先讲一下思路,用首先用 gradientLayer 制作渐变,再对其 location 进行动画,再添加一个 maskLayer,将文字以图形的方式绘制进去。大体上就可以制作出上图的效果了。

    //首先制作出 gradientLayer let gradientLayer = CAGradientLayer = { let gradientLayer = CAGradientLayer() gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5) gradientLayer.endPoint = CGPoint(x:1.0, y: 0.5)

    let colors = [
            UIColor.black.cgColor,
            UIColor.white.cgColor,
            UIColor.black.cgColor
    ]
    gradientLayer.colors = colors
    
    let locations = [
        0.25,
        0.5,
        0.75
    ]
    gradientLayer.locations = locations
    return gradientLayer
    

    }()

    //在该 view 中,设定 frame 和添加该 layer gradientLayer.frame = bounds layer.addSublayer(gradientLayer)

  • 至此,就已经在 view 的中间部分,制作出一个从黑到白再到黑的渐变图形。现在我们需要给这个渐变加以动画,使其展现出一种滑动效果。

    let gradientAnimation = CABasicAnimation(keyPath: “locations”) gradientAnimation.fromValue = [0.0, 0.0, 0.25] gradientAnimation.toValue = [0.75, 1.0, 1.0] gradientAnimation.duration = 3.0 gradientAnimation.repeateCount = Float.infinity

    gradientLayer.add(gradientAnimation, forKey: nil)

    //此时已经完成了渐变动画效果,但是不够流畅,因为总是到了最后,就突然闪回,渐变也较为生硬,但是我们可以换一个思路,把渐变的路程拉长,这样中间的 view 只看到中间的一部分,有驶入驶出效果。

    gradientLayer.frame = CGRect( x: -bounds.size.width, y: bounds.origin.y, width: 3 * bounds.size.width, height: bounds.size.height)

  • 这样,渐变过渡动画就已经完成,我们现在要添加遮罩文字。

    //首先创建文字属性 let textAttributes = [String: AnyObject] = { let style = NSMutableParagraphStyle() style.alignment = .center return [ NSFontAttributeName: UIFont( name: “HelveticaNeue-Thin”, size: 28.0)!, NSParagraphStyleAttributeName: style] }()

    //绘制图片 let image = UIGraphicsImageRenderer(size: bounds.size).image { _ in //string draw text.draw(in: bounds, withAttributes: textAttributes) }

    //创建 maskLayer let maskLayer = CALayer() maskLayer.backgroundColor = UIColor.clear.cgColor maskLayer.frame = bounds.offsetBy(dx: bounds.size.width, dy: 0) maskLayer.contents = image?.cgImage

    gradientLayer.mask = maskLayer

  • 如此一来,该动画就已经完成了。

iOS动画

layer Animation(五)

Layer Animation(三)