渐变和遮罩
本教程使用 xcode 7 和 Swift 2。 在 的第三部分，第14章“渐变动画”中，我介绍了如何对 CAGradientLayer 属性进行动画。在本月的这一期，我将教你如何创建和 CAGradientLayer 有关而不是和 CALayer 自身有关的动画。这里，你需要对该渐变层的蒙版内容上进行动画。 听起来有点绕口，因此我会说直接用 Xcode 看一些 Swift 代码吧，这样你就知道我指的是什么了。当本教程结束，你会亲自实现这样一个漂亮的动画： 开始我已经准备了一个开始项目，不需要你去新建项目和创建 UI 和自动布局了 这个项目包含了一个游戏的启动场景，这个游戏和童话故事《青蛙王子》有关。你不需要编写游戏代码，你需要做的仅仅是创建简介界面，以便玩家能够看到这个格林童话的开头几段。 Main.storyboard 只包含了一个 view controller，这个 view controller 显示了一个全屏的文字标签。 打开 ViewController.swift 看看。这里有一个出口连接到一个 UILabel，直接就叫做 label；还有一个属性 story，用于包含这个童话故事的开头几段内容。了解得差不多后——让我们来写代码吧。 添加渐变首先要创建一个渐变图层。在 viewDidAppear() 中添加代码： let gradient = CAGradientLayer()
gradient.frame = view.bounds
gradient.startPoint = CGPoint(x: 0.0,y: 0.0)
gradient.endPoint = CGPoint(x: 1.0,y: 1.0)
你创建了一个 CAGrandientLayer 对象，设置它的 frame 让它填充全屏。然后设置它的渐变方向为左上角（0,0) 到右下角(1,1）: 在能够在屏幕上看到任何颜色之前，你还必须设置渐变图层的开始色和终止色。添加下列代码，然后将渐变图层添加到屏幕上： gradient.colors = [
UIColor(red: 0.0,green: 1.0,blue: 0.752,alpha: 1.0).CGColor,UIColor(red: 0.949,green: 0.03,blue: 0.913,alpha: 1.0).CGColor
]
view.layer.addSublayer(gradient)
将 gradient 添加到 view controller 的 view 的 sublayers 之后，它就会显示出来。运行项目，你会看到： 不错！ 在 viewDidAppear() 中加入： gradient.mask = label.layer 这句代码会将 label 上的所有非透明像素用于去 mask 渐变图层的内容。 运行 app，看看效果——你会看到 Text 这个字已经不是原来的黑色了，而是填充以渐变图层的对应像素的蓝色。现在来点动画，让事情更有趣。 打字效果添加一个新方法，带一个参数，将它的字符挨个添加到 label 上： func punchText(text: String) {
if text.characters.count > 0 {
label.text = "(label.text!)(text.substringToIndex(text.startIndex.successor()))"
delay(seconds: 0.04,completion: {
self.punchText(text.substringFromIndex(text.startIndex.successor()))
})
} else {
//finished punching text
}
}
这个方法每隔 0.04 秒添加一个字符到 label 上，知道所有的字符已经添加完。它对自己进行递归，你只需要以完整字符串作为参数调用这个方法一次，它会完成接下来的所有动作。 回到 viewDidAppear() 方法，在最后加入： label.text = “” 运行 app，欣赏一下这个打字动画吧： 很炫吧？我也是这样想的 :] 更多的遮罩效果一个基于渐变色背景之上的打字效果对于一个好玩的游戏来是挺不错的，但这还不够。你可以添加更多的渐变色遮罩，让这段介绍能够更吸引人。 首先——在 punchText() 打完故事梗概后显示一个点击按钮的动画，引导用户点击屏幕。 我们准备用一个简单的图形动画，用 3 个圆圈收缩放大，吸引用户点击。 添加一个方法，将 3 个圆圈绘制到屏幕上： func addButtonRing() {
let side: CGFloat = 60.0
let button = CAShapeLayer()
button.position = CGPoint(x: label.bounds.width * 0.5 - side/2,y: label.bounds.height * 0.85)
button.strokeColor = UIColor.blackColor().CGColor
button.fillColor = UIColor.clearColor().CGColor
button.path = UIBezierPath(ovalInRect: CGRect(x: 0,y: 0,width: side,height: side)).CGPath
button.lineWidth = 1.0
button.opacity = 0.5
label.layer.addSublayer(button)
}
在 addButtonRing() 方法中，你创建了一个 CAShaperLayer，设置它的位置位于屏幕底部（显示在文字下方），最后设置它的形状为一个空心的圆。 我们将这个 CAShapeLayer 添加到…… label 上。what？——我们想让这个形状作为遮罩图层中的一部分，这样就得将新的图层添加到 label 上了，因为 label 是渐变图层遮罩。 马上就会看到效果了——首先在 punchText() 方法执行完后创建几个这样的圆。 找到这句注释：//finished punching text ，然后添加代码(就在 else 语句块之内): delay(seconds: 0.1,completion: addButtonRing)
delay(seconds: 1.2,completion: addButtonRing)
delay(seconds: 2.4,completion: addButtonRing)
当 punchText() 方法打完所有的字符，它会调用 addButtonRing 方法 3 次，以一定的时间间隔。我们来看看屏幕上会显示什么（等所有文字显示完）： 我们添加了 3 个圆，但只看见了一个。呃——实际上 3 个圆都在，只是它们重叠了。 你可以添加一点动效来解决这个问题。找到 addButtonRing() 方法添加几句代码： let scale = CABasicAnimation(keyPath: "transform.scale")
scale.fromValue = 1.0
scale.toValue = 0.67
scale.duration = 2.0
scale.repeatCount = Float.infinity
scale.autoreverses = true
button.addAnimation(scale,forKey: nil)
这个动画很简单，每个圆都会不停地放大缩小。这下你会看到效果了吧——所有的圆都会显示出来，同时渐变色遮罩也起作用了。效果是这样： 不错的小动效！ 为了让这个故事简介显得更加漂亮，教程的最后一步是添加一只青蛙在屏幕上。 在 Images.xcassets 中包含了一支青蛙的图片（这张图片来自于公网）： 回到 ViewController.swift，添加以下代码到 viewDidAppear() 方法中： let frog = UIImage(named: "frog")
let frogImage = UIImageView(image: frog)
frogImage.center.x = label.bounds.width/2
label.addSubview(frogImage)
我们用这张青蛙图片来创建 image view，然后将它放到 label 的上边框中央。最后将 image view 添加做 label 的 subview。 注意，你可以以任意方式来创建遮罩——之前你用的是 addSublayer，现在你用的是 addSubview——这都是可以的，感谢 Core Animation。 运行 app 欣赏一下吧： 接下来做什么？如果你想进一步学习，请重新阅读 iOS Animations by Tutorials 的第 13 章“渐变动画”——你也可以让背景进行动画，创建更炫彩的效果。 如果你准备基于本教程的内容编写一些好玩的东东，请回复这封邮件或者 twitter 给我 @icanzilb。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |