在圆形图表上应用动画

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编写的示例项目，它使用一种非常相似的技术来创建一个＆＃34;时钟擦除＆＃34;使用CAShapeLayer作为遮罩层的动画。

看看项目中的时钟擦除动画＆＃34; iOS CAAnimationGroup demo＆＃34; Github项目。

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并设置一些参数使其看起来正确＆＃34;。我知道你并没有使用Swift，但如果你想要特定的指针，只需查看源代码，看看我是如何解决它的。希望这有帮助！