首先,我们来分解一下iPhone锁屏文字动画效果是怎样实现的:
1.首先我们要做一个CAGradientLayer,如下图
2.然后,让这个CAGradientLayer像下面这样动起来
3.最后,给这个CAGradientLayer加个遮罩层,这个遮罩层用文字来做,最终达到我们想要实现的效果。
往下所有代码全部由swift 3实现.
下面,我们来实现一下,这里是初始工程,当然,你也可以自己新建一个工程,新建一个类继承自UIView,然后在Storyboard里面拖拽一个UIView跟它关联即可。
1.首先,我们来实现第一步,添加一个CAGradientLayer
打开AnimateView.swift,添加以下代码,关于CAGradientLayer的基本知识,可以参考CAGradientLayer最简使用
let grandientLayer: CAGradientLayer = {
let grandientLayer = CAGradientLayer()
grandientLayer.colors = [
UIColor.darkGray().cgColor,
UIColor.white().cgColor,
UIColor.darkGray().cgColor
]
grandientLayer.locations = [0.0, 0.5, 1.0]
grandientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
grandientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
return grandientLayer
}()
override func layoutSubviews() {
super.layoutSubviews()
grandientLayer.frame = bounds
}
override func didMoveToWindow() {
super.didMoveToWindow()
layer.addSublayer(grandientLayer)
}
执行结果如下:
2.给grandientLayer添加一个动画,让它像步骤二那样动起来
在didMoveToWindow()的最后添加一下代码
let animate = CABasicAnimation(keyPath: "locations")
animate.fromValue = [0.0, 0.0, 0.2]
animate.toValue = [0.8,1.0, 1.0]
animate.duration = 2.5
animate.repeatCount = Float.infinity
grandientLayer.add(animate, forKey: nil)
这里通过改变grandientLayer的locations来达到渐变颜色移动的效果。
执行结果如下:
3.最后,来实现文字层遮罩
声明一个text变量,@IBInspectable表示可以直接在storyboard中进行配置该属性。(如下图所示)
@IBInspectable var text: String!
let textAttributes : NSDictionary = {
let style = NSMutableParagraphStyle()
style.alignment = .center
return [
NSFontAttributeName: UIFont(name: "Verdana-Italic", size: 28.0)!,
NSParagraphStyleAttributeName: style
]
}()
在layoutSubviews()的最后添加以下代码
UIGraphicsBeginImageContextWithOptions(bounds.size, false, 0.0)
let nsstringText = text as NSString
nsstringText.draw(in: bounds, withAttributes: textAttributes as? [String : AnyObject])
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
let maskLayer = CALayer()
maskLayer.frame = bounds
maskLayer.contents = image?.cgImage
grandientLayer.mask = maskLayer
执行结果如下:
最终的demo工程可以从这里下载最终工程