ios - iOS 中的极地变换

Question

谁能帮助我通过 Core Graphics 实现这种动画转换。看粗略的草图:

这是一个简单的图表图形，我需要将直方图样式的条形图(左图)转换为饼图(右图)。从字面上看，任务是用流畅的动画将一个矩形滚动成一个环。我几乎找到了通过一系列棘手的绘图、蒙版剪裁和仿射变换来完成此操作的方法，但这看起来并不是我想要的样子。

Answer 1

这是一个有趣的挑战，尤其是当您想要维护不同的分割市场时。我不会给你一个完整的答案(即实现这个的完整示例代码)，但我会解释我认为需要做什么才能达到你想要的效果。

路径

首先，我将这两个图表视为一条被描边的直线(让我们暂时忽略线段)，因此挑战是从直线到封闭的圆。

我建议使用以下两条路径，您可以在它们之间设置动画以实现漂亮的环绕效果。

// As we render a circle as a chain of straight line segments
// changing the count of said segments makes the circle more or less smooth
// Try this with other values, such as 8 or 32
let segments = 72

// With this segment count, the angle of each segment in the circle is
let angle = (2 * CGFloat(M_PI)) / CGFloat(segments)

// First path (straight)
let length = CGFloat(300.0)
let segmentLength = length / CGFloat(segments)

let straightPath = CGPathCreateMutable()
CGPathMoveToPoint(straightPath, nil, 0.0, 0.0)
for i in 0...segments {
    CGPathAddLineToPoint(straightPath, nil, 0.0, CGFloat(i) * segmentLength)
}

// Second path (circle)
let radius = CGFloat(100.0)
let center = CGPoint(x: 104.0, y: 104.0)
let space = (x: 2.0, y: 2.0)

var circlePath = CGPathCreateMutable()
CGPathMoveToPoint(circlePath, nil, center.x + radius, center.y)
for i in 0...segments {
    let x = cos(-CGFloat(i) * angle)
    let y = sin(-CGFloat(i) * angle)
    CGPathAddLineToPoint(circlePath, nil, center.x + radius * x, center.y + radius * y)
}

我还上传了一个 Swift plaground 供你试验，你可以找到here

分割

现在，处理分段可能有点棘手，但我提出了一个可能可行的相对简单的实现。主要是，CAShapeLayer 具有以下两个属性 - strokeStart 和 strokeEnd，它们允许控制实际描边的路径部分。

考虑到这一点，您可以创建与段一样多的层，为它们分配相同的路径并调整它们各自的 strokeStart 和 strokeEnd 属性让它看起来像你期望的那样。与他们在 this post 中所做的有些相似.

动画

假设您已经征服了前两个方面，动画方面应该相对简单，使用您拥有的两种类型的路径，您可以创建一个从一个到另一个的简单 CABasicAnimation。我假设您熟悉 CoreAnimation 及其用法(即如何正确更改模型值以匹配显示的值等)。

我将以一个快速动画结束我的回答，显示最终结果可能是什么样子(减去片段)，我已经卡住动画并正在操纵层的 timeOffset 属性以手动擦洗通过它。

希望我的回答能帮助您更接近您想要的解决方案。同样重要的是要强调我的代码示例只是一个开始，您可能需要对值进行相当多的调整才能获得令人满意的动画(例如，线的长度应该与圆周的长度相似)圆圈)。