ios - 使用 drawRect 绘制两个图形并为其设置动画。背景图和前景图

Question

我正在使用 drawRect 绘制一个非常简单的形状(下图中的深蓝色)。

我希望它从左到右动画，以便它增长。这里需要注意的是，我需要有一个灰色的“最大”背景，如图像的顶部所示。

现在，我通过覆盖一个白色 View 来模拟这个动画，然后设置它的大小动画，这样看起来蓝色在向右移动。虽然这有效......我需要背景灰色形状始终存在。在我覆盖的白色 View 中，这是行不通的。

下面是绘制“当前代码”版本的代码:

    let context = UIGraphicsGetCurrentContext()
    CGContextMoveToPoint(context, 0, self.bounds.height - 6)
    CGContextAddLineToPoint(context, self.bounds.width, 0)
    CGContextAddLineToPoint(context, self.bounds.width, self.bounds.height)
    CGContextAddLineToPoint(context, 0, self.bounds.height)
    CGContextSetFillColorWithColor(context,UIColor(red: 37/255, green: 88/255, blue: 120/255, alpha: 1.0).CGColor)
    CGContextDrawPath(context, CGPathDrawingMode.Fill)

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

Answer 1

drawRect 正在生成静态图片。要获得您所说的动画，我会推荐以下内容:

1. 使用CoreAnimation制作动画
2. 使用 UIBezierPath 制作你需要的形状
3. 使用 CALayer 的蒙版在所需形状内制作动画

这是 Playground 的示例代码:

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