简而言之,它以灰色圆圈开始,随着动画的进行,箭头围绕圆圈移动,直到达到我指定的百分比.
我已经使用了Zachary Waldowski在这个SO问题中发布的示例代码:
Animated CAShapeLayer Pie
这让我到了可以创建基本动画的地步.栗色馅饼的长度达到了正确的大小.我正在努力的是如何将箭头映射到动画,以便随着饼图的增长而拖动它.
有关如何实现这一目标的任何想法?
解决方法 好的,我找到了解决方案.在创建的工作Zachary Waldowski(参见我的原始帖子)的基础上,我能够在CALayer中完成整个工作.
简而言之,我在栗色中绘制一个外圆,在浅灰色中绘制一个较小的圆,在白色中绘制一条描边路径,然后用手绘制三角形的箭头.
这是执行魔术的相关代码部分:
- (voID)drawInContext:(CGContextRef)context { CGRect circleRect = CGRectInset(self.bounds,1,1); CGfloat startAngle = -M_PI / 2; CGfloat endAngle = self.progress * 2 * M_PI + startAngle; CGcolorRef outerPIEcolor = [[UIcolor colorWithRed: 137.0 / 255.0 green: 12.0 / 255.0 blue: 88.0 / 255.0 Alpha: 1.0] CGcolor]; CGcolorRef innerPIEcolor = [[UIcolor colorWithRed: 235.0 / 255.0 green: 214.0 / 255.0 blue: 227.0 / 255.0 Alpha: 1.0] CGcolor]; CGcolorRef arrowcolor = [[UIcolor whitecolor] CGcolor]; // Draw outer pIE CGfloat outerRadius = CGRectGetMIDX(circleRect); CGPoint center = CGPointMake(CGRectGetMIDX(circleRect),CGRectGetMIDY(circleRect)); CGContextSetFillcolorWithcolor(context,outerPIEcolor); CGContextMovetoPoint(context,center.x,center.y); CGContextAddArc(context,center.y,outerRadius,startAngle,endAngle,0); CGContextClosePath(context); CGContextFillPath(context); // Draw inner pIE CGfloat innerRadius = CGRectGetMIDX(circleRect) * 0.45; CGContextSetFillcolorWithcolor(context,innerPIEcolor); CGContextMovetoPoint(context,innerRadius,0); CGContextClosePath(context); CGContextFillPath(context); // Draw the White line CGfloat lineRadius = CGRectGetMIDX(circleRect) * 0.72; CGfloat arrowWIDth = 0.35; CGContextSetstrokecolorWithcolor(context,arrowcolor); CGContextSetFillcolorWithcolor(context,arrowcolor); CGMutablePathref path = CGPathCreateMutable(); CGContextSetlinewidth(context,16); CGfloat lineEndAngle = ((endAngle - startAngle) >= arrowWIDth) ? endAngle - arrowWIDth : endAngle; CGPathAddArc(path,NulL,lineRadius,lineEndAngle,0); CGContextAddpath(context,path); CGContextstrokePath(context); // Draw the Triangle pointer CGfloat arrowStartAngle = lineEndAngle - 0.01; CGfloat arrowOuterRadius = CGRectGetMIDX(circleRect) * 0.90; CGfloat arrowInnerRadius = CGRectGetMIDX(circleRect) * 0.54; CGfloat arrowX = center.x + (arrowOuterRadius * cosf(arrowStartAngle)); CGfloat arrowY = center.y + (arrowOuterRadius * sinf(arrowStartAngle)); CGContextMovetoPoint (context,arrowX,arrowY); // top corner arrowX = center.x + (arrowInnerRadius * cosf(arrowStartAngle)); arrowY = center.y + (arrowInnerRadius * sinf(arrowStartAngle)); CGContextAddlinetoPoint(context,arrowY); // bottom corner arrowX = center.x + (lineRadius * cosf(endAngle)); arrowY = center.y + (lineRadius * sinf(endAngle)); CGContextAddlinetoPoint(context,arrowY); // point CGContextClosePath(context); CGContextFillPath(context); [super drawInContext: context];}总结
以上是内存溢出为你收集整理的iOS中的动画饼图全部内容,希望文章能够帮你解决iOS中的动画饼图所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)