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

Question

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

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

现在，我正在通过覆盖白色视图来模拟此动画，然后对其大小进行动画处理，这样看起来蓝色在向右移动。虽然这有效......我需要背景灰色形状始终存在。在我覆盖的白色视图中，这是行不通的。

下面是绘制"current code"版本的代码：

    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)

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

Answer 1

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

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

你可以看看Facebook的Shimmer Example，它模拟了iPhone解锁动画的效果。它使用遮罩层。这个想法也适用于您的示例。

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

Answer 2

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

使用CoreAnimation制作动画
使用 UIBezierPath 制作你需要的形状
使用 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")

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

Using drawRect to draw & animate two graphs. A background graph, and a foreground graph

animation

drawrect

ios

swift

cgcontextdrawpath