在圆形图表上应用动画

Question

我在 paintcode 中构建了一个与此示例非常相似的圆形图：

http://www.paintcodeapp.com/news/animating-apple-watch-activity-rings-in-paintcode

我已经成功地在我的 iOS 视图上轻松绘制了控件，但现在我想为图形设置动画，使其从 0 开始并向指定角度缓和。基本上动画应该看起来像上面 URL 中视频的前两秒。

制作此类动画的最佳方法是什么？

仅供参考：我在 C#/Xamarin 工作，但我对语法一点也不挑剔，所以 Objective C 或 Swift 示例就可以了。

Answer 1

你想用CAShapeLayers，一个圆弧一个，每个圆弧安装一个完整的圆弧，线帽样式设置为圆角。

然后您想将 strokeEnd 属性设置为较小的值（尝试 .05）。这将导致形状仅绘制其弧度的 5%。

最后，您想将 CAAnimations 提交给每个形状层，使 strokeEnd 值从起始值到 1.0 进行动画处理。这将使绘制完整圆的圆弧动画化。

我没有现成的示例代码供您使用。我确实有一个用 Objective-C 编写的示例项目，它使用非常相似的技术创建一个 "clock wipe" 动画，使用 CAShapeLayer 作为遮罩层。

看看 Github 上的项目“iOS CAAnimationGroup demo”中的时钟擦除动画。

Answer 2

我写了一个 UIView 子类，它完全符合您的要求。您只需提供一个环数组以及一些其他参数，它就会为您处理所有设置和管理。

https://github.com/lionheart/ConcentricProgressRingView

在 UIViewController 的顶部，导入模块：

import ConcentricProgressRingView

然后，在您的 viewDidLoad:

let rings = [
    ProgressRing(color: UIColor.redColor()),
    ProgressRing(color: UIColor.blueColor()),
]

let margin: CGFloat = 2
let radius: CGFloat = 80
let progressRingView = ConcentricProgressRingView(center: view.center, radius: radius, margin: margin, rings: rings, defaultWidth: 20)
view.addSubview(progressRingView)

实例化 ConcentricProgressRingView 实例后，使用 setProgress.

将特定环动画化为百分比

ring.arcs[1].setProgress(0.5, duration: 2)

在幕后，这只是使用 CABasicAnimation 并设置了一些使其看起来像 "right" 的参数。我知道你没有使用 Swift，但如果你想要具体的指示，只需查看源代码，看看我是如何解决它的。希望这对您有所帮助！

在圆形图表上应用动画

Applying animation on a circular chart

ios

objective-c

animation

xamarin

paintcode