Ios 使用drawRect绘制&；设置两个图形的动画。背景图和前景图

我正在使用drawRect绘制一个非常简单的形状（下图中为深蓝色）

我想让它从左到右设置动画，这样它就会变大。这里的警告是，我需要有一个灰色的“最大”背景，如图片顶部所示

现在，我通过叠加一个白色视图来模拟这个动画，然后对它的大小设置动画，使它看起来像是蓝色正在右侧设置动画。虽然这有效。。。我需要背景灰色的形状总是在那里。对于我的白色叠加视图，这根本不起作用

以下是绘制“当前代码”版本的代码：

---

如何从左到右设置蓝色部分的动画，同时保持图形的灰色“最大”部分始终可见？

在您的代码中，我只看到您绘制了一次图形，为什么不先绘制灰色部分，然后再绘制蓝色部分呢

我认为在drawRect函数中实现动画不够有效

你可以看看Facebook，它模拟了iPhone解锁动画的效果。它使用遮罩层。这个想法也可以在你的例子中使用

---

此外，Facebook可以简化您的工作。

drawRect正在制作静态图片。要获得您所说的动画，我建议您：

使用CoreAnimation生成动画

使用UIBezierPath创建所需的形状

使用CALayer的遮罩在所需形状内设置动画

以下是游乐场的示例代码：

import UIKit
import QuartzCore
import XCPlayground

let view = UIView(frame: CGRect(x: 0, y: 0, width: 120, height: 40))
XCPlaygroundPage.currentPage.liveView = view

let maskPath = UIBezierPath()

maskPath.moveToPoint(CGPoint(x: 10, y: 30))
maskPath.addLineToPoint(CGPoint(x: 10, y: 25))
maskPath.addLineToPoint(CGPoint(x: 100, y: 10))
maskPath.addLineToPoint(CGPoint(x: 100, y: 30))
maskPath.closePath()

let maskLayer = CAShapeLayer()
maskLayer.path = maskPath.CGPath
maskLayer.fillColor = UIColor.whiteColor().CGColor

let rectToAnimateFrom = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 97, height: 40))
let rectToAnimateTo = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 0, height: 40))

let layerOne = CAShapeLayer()
layerOne.path = maskPath.CGPath
layerOne.fillColor = UIColor.grayColor().CGColor

let layerTwo = CAShapeLayer()
layerTwo.mask = maskLayer
layerTwo.fillColor = UIColor.greenColor().CGColor

view.layer.addSublayer(layerOne)
view.layer.addSublayer(layerTwo)

let animation = CABasicAnimation(keyPath: "path")
animation.fromValue = rectToAnimateFrom.CGPath
animation.toValue = rectToAnimateTo.CGPath
animation.duration = 1
animation.repeatCount = 1000
animation.autoreverses = true

layerTwo.addAnimation(animation, forKey: "Nice animation")

---

“在你的代码中，我只看到你画一次图形，为什么不先画灰色部分，然后再画蓝色部分。”-这就是计划，只要我想办法制作动画，或者可能制作蓝色层的遮罩动画。谢谢你对框架的建议，但我想让这一切都是本地的，没有任何第三方。@SVGred-Wow，这太棒了！在大多数情况下，这正是我所需要的！我需要修改一下，但我请客。在图形的初始实现中，我使用override func drawRect（rect:CGRect）将UIView子类化。我是否不需要为您的版本覆盖drawRect？还有，你能解释一下最后一行吗？（layerTwo.addAnimation）我也将你的帖子编辑成了swift 2.3语法。在我这边玩得很好@SVGreg由于使用了多个Swift版本，所以最好提及您在哪个版本中编写答案。@Joe:drawRect仅用于在视图中绘制自定义内容。答案是-不-使用我的代码不需要重写drawRect。addAnimation实际上是运行您需要的动画。您可以将其自定义为您喜欢的任何动画。@Dravidian该代码非常简单，并且不使用特定的语言说明/功能。但是无论如何-好建议。@SVGreg谢谢你的跟进，巴德。我让它很顺利地满足了我的愿望。

import UIKit
import QuartzCore
import XCPlayground

let view = UIView(frame: CGRect(x: 0, y: 0, width: 120, height: 40))
XCPlaygroundPage.currentPage.liveView = view

let maskPath = UIBezierPath()

maskPath.moveToPoint(CGPoint(x: 10, y: 30))
maskPath.addLineToPoint(CGPoint(x: 10, y: 25))
maskPath.addLineToPoint(CGPoint(x: 100, y: 10))
maskPath.addLineToPoint(CGPoint(x: 100, y: 30))
maskPath.closePath()

let maskLayer = CAShapeLayer()
maskLayer.path = maskPath.CGPath
maskLayer.fillColor = UIColor.whiteColor().CGColor

let rectToAnimateFrom = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 97, height: 40))
let rectToAnimateTo = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 0, height: 40))

let layerOne = CAShapeLayer()
layerOne.path = maskPath.CGPath
layerOne.fillColor = UIColor.grayColor().CGColor

let layerTwo = CAShapeLayer()
layerTwo.mask = maskLayer
layerTwo.fillColor = UIColor.greenColor().CGColor

view.layer.addSublayer(layerOne)
view.layer.addSublayer(layerTwo)

let animation = CABasicAnimation(keyPath: "path")
animation.fromValue = rectToAnimateFrom.CGPath
animation.toValue = rectToAnimateTo.CGPath
animation.duration = 1
animation.repeatCount = 1000
animation.autoreverses = true

layerTwo.addAnimation(animation, forKey: "Nice animation")