1

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

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

在paintcode中绘制的圆形图

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

处理此类动画的最佳方式是什么？

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

4

2 回答 2

0

您想使用 CAShapeLayers，每个圆弧一个，每个圆弧都安装一个完整的圆弧，并且线帽样式设置为圆角。

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

最后，您希望将 CAAnimations 提交给每个形状图层，将 strokeEnd 值从起始值设置为 1.0。这将为绘制整个圆的弧设置动画。

我没有任何现成的示例代码给你。我确实有一个用 Objective-C 编写的示例项目，它使用一种非常相似的技术来创建使用 CAShapeLayer 作为遮罩层的“时钟擦除”动画。

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

于 2016-02-03T14:03:47.730 回答
0

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

于 2016-07-01T04:08:02.830 回答