使用drawRect绘制&动画两个图。背景图和前景图 [英] Using drawRect to draw & animate two graphs. A background graph, and a foreground graph

问题描述

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

I am using drawRect to draw a pretty simple shape (dark blue in the image below).

我希望它从左到右进行动画处理，以使其增长。需要注意的是，我需要有一个灰色的最大背景，如图像顶部所示。

I'd like this to animate from the left to the right, so that it grows. The caveat here is I need there to be a "max" background in gray, as seen in the top part of the image.

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

Right now, I'm simulating this animation by overlaying a white view, and then animating the size of it, so that it looks like the blue is animating to the right. While this works... I need the background gray shape to always be there. With my overlayed white view, this just doesn't work.

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

Here's the code for drawing the "current code" version:

    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)

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

推荐答案

drawRect正在生成静止图像。要获得动画，我要推荐以下内容：

drawRect is producing still picture. To get animation you're saying about I'd recommend the following:

1. 使用CoreAnimation制作动画


2. 使用UIBezierPath制作所需的形状


3. 使用CALayer的蒙版在所需的形状内制作动画

这是Playground的示例代码：

Here is example code for 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绘制&动画两个图。背景图和前景图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！