前言
最近做的一个需求中，需要用旋转的饼状图来展示数据。在github上找了一圈，发现竟然没有现成的轮子，于是看了别人源码后就自己实现了一下，代码已经放在我的github上。下面看看怎么完成这种效果。注意以下代码是用swift实现的。
思路分析
看到下面这个效果，切入点应该是怎么生成这个饼状图，然后再让饼状图旋转。
rotatePieChartDemo.gif
怎么生成饼状图（UIBezierPath）
首先是要新建一个CAShapeLayer，这是一个继承CALayer的类。可能你对CALayer比较陌生，不过做iOS一定不会对UIView陌生，每个UIView都有一个layer属性，用来设置一些圆角、阴影等效果。至于为什么有UIView了，还要加一个layer，可以参考这本书iOS核心动画高级技巧，layer的存在是为了让OSX和iOS两个平台能兼容，在OSX中，NSView就对应了layer。
有了CAShapeLayer后，设置其几个属性：
- path，这里我们用到UIBezierPath，贝塞尔曲线来提供圆形轨迹。
- lineWidth: 圆环的宽度
- strokeColor：画笔颜色
- strokeStart:画笔起始点，取值范围0.0-1.0
- strokeEnd:画笔结束点，取值范围0.0-1.0
单个饼状图的生成代码如下：
private func generateLayers(radius:CGFloat, layerFrameWidth:CGFloat, percentageStart:CGFloat, percentageEnd:CGFloat) -> CAShapeLayer{
let path = UIBezierPath(arcCenter: CGPointMake(layerWidth, layerWidth), radius: radius, startAngle: CGFloat(-M_PI_2), endAngle: CGFloat(3 * M_PI_2) , clockwise: true)
let pieLayer = CAShapeLayer()
pieLayer.path = path.CGPath
pieLayer.lineWidth = lineWidth
pieLayer.strokeColor = UIColor(hue: percentageEnd, saturation: 0.5, brightness: 0.75, alpha: 1.0).CGColor
pieLayer.fillColor = nil
pieLayer.strokeStart = percentageStart
pieLayer.strokeEnd = percentageEnd
return pieLayer
}
可以看到，通过指定贝塞尔曲线的圆心arcCenter，半径radius，开始角度startAngle、结束角度endAngle、绘制方向clockwise来生成一个轨迹path。
然后就是通过指定画笔的颜色strokeColor和宽度lineWidth以及起始点位置strokeStart和结束位置strokeEnd，来画出一部分圆环（饼状图）。
不得不说UIBezierPath真是特别好用，因为我刚开始不懂时，尝试用CoreGraphics去画，那感觉真是想死。
全部的饼状图拼接在一起，就成了一个圆环，代码如下
private func setupRotateLayers(){
containerLayer = CAShapeLayer()
containerLayer.frame = CGRectMake(0, 0, self.bounds.width, self.bounds.width)
var percentageStart:CGFloat = 0
var percentageEnd:CGFloat = 0
for i in 0...dataItem.count - 1{
percentageEnd += dataItem[i] / itemValueAmount
let pieLayer = generateLayers(radius, layerFrameWidth: layerWidth, percentageStart: percentageStart, percentageEnd: percentageEnd)
containerLayer.addSublayer(pieLayer)
percentageStart = percentageEnd
}
gradientMask(radius, width: layerWidth)
if dataItem.count > 0{
let initRotateRadian = -CGFloat(M_PI) * dataItem[0] / itemValueAmount
rotateContainerLayerWithRadian(initRotateRadian)
}
self.layer.addSublayer(containerLayer)
}
首先需要一个容器container来收集这些小块的饼状图，所以先是生成了一个containerLayer，然后根据外部传入的数据dataItem来计算每个饼状图的所占比例percentageStart和percentageEnd，并转化为饼状图的开始角度和结束角度。
后面的gradienMask用来做一个渐变显示的效果，接下去的代码是初始化旋转的角度。
饼状图的旋转（CoreAnimation）
旋转一个layer，我最开始想用重绘来实现，后面发现用CoreAnimation似乎更简单。
代码示例如下
func reDraw(index:Int){
var curIndex = index - 1
if index == 0{
curIndex = dataItem.count - 1
}
var rotateRadian = dataItem[curIndex] / itemValueAmount + dataItem[index] / itemValueAmount
rotateRadian = -rotateRadian * CGFloat(M_PI)
rotateContainerLayerWithRadian(rotateRadian)
}
private func rotateContainerLayerWithRadian(radian:CGFloat){
let myAnimation = CABasicAnimation(keyPath: "transform.rotation")
let myRotationTransform = CATransform3DRotate(containerLayer.transform, radian, 0, 0, 1)
if let rotationAtStart = containerLayer.valueForKeyPath("transform.rotation") {
myAnimation.fromValue = rotationAtStart.floatValue
myAnimation.toValue = CGFloat(rotationAtStart.floatValue) + radian
}
containerLayer.transform = myRotationTransform
myAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
containerLayer.addAnimation(myAnimation, forKey: "transform.rotation")
}
旋转的时候会用一个index来做标记，记住当前的位置，所以调用reDraw时传入下一个index就可以完成旋转到下一个饼状图的操作。
可以看到旋转角度的计算是rotateRadian = dataItem[curIndex] / itemValueAmount + dataItem[index] / itemValueAmount，需要取数组左右元素值的各一半。然后传入rotateContainerLayerWithRadian函数，通过这个函数来执行旋转操作。
myAnimation是用CABasicAnimation创建的一个动画，这里要特别留意其参数keyPath，我以前学CoreAnimation时对这个参数不以为意，然后怎么调试效果都出不来，白白浪费了好多时间。其实这个transform.rotation可以在苹果的官方文档中查到，特指layer旋转的属性。
然后用CATransform3DRotate来创建一个transform，直接赋值给containerLayer.transform就可以了，留意一下角度换算就没问题了。
fromValue和toValue应该是最熟悉的两个属性了，fromValue表示动画开始前的属性状态，toValue表示动画结束后的属性状态。
可能你会对timingFunction感兴趣，这个效果可以在这里得到解释。
最后将配置好的myAnimation添加到containeLayer就OK了，系统会自动去执行这一部分动画的。
后话
这部分代码仅分享了一种实现方法，后期还会继续改进，比如传入的不只是dataItem，还应该有自定义的color，以及每一部分的百分比，旋转开始位置等等。
网友评论