使用drawRect绘制和动画两个图形。 背景图和前景图

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

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

现在，我通过覆盖白色视图来模拟这个动画，然后设置它的大小动画，这样看起来蓝色就是向右动画。 虽然这有效…我需要背景灰色的形状永远在那里。 使用我的叠加白色视图，这不起作用。

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

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

Answer 2

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

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

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

此外，Facebook的流行框架可以简化您的工作。