简体   繁体   English

使UIImageView出现的圆形动画

[英]Circular animation to make UIImageView appear

I have a "circular" image, something like a pie chart. 我有一个“圆形”图像,有点像饼图。 I would like a nice appearing animation, like when a pie chart fills itself from 0 to the value. 我想要一个很好的外观动画,例如饼形图从0填充到值本身。

I usually use something like this when I want to animate views : 当我想为视图设置动画时,通常使用这样的方法:

[UIView animateWithDuration: 3.0 
                      delay: 0.0 
                    options: UIViewAnimationCurveEaseInOut 
                 animations: ^ {
                             // The animation
                     } 
                 completion: ^(BOOL finished) {
                             // On completion
                     } ];

Is it possible to do the same thing for a circular animation ? 圆形动画是否可以做同样的事情? I really have no idea on how to do that. 我真的不知道该怎么做。

Thanks for any leads ! 感谢您的任何线索!

Note : iOS 5, storyboards, ARC, and all that stuff :) 注意:iOS 5,情节提要,ARC和所有其他东西:)


Edit : for future discussion, the image looks like this : 编辑:为了将来的讨论,图像如下所示:

在此处输入图片说明

Okay, here it goes :) 好的,这是:)

First option (Easy one). 第一种选择(简便)。 You could use UIImageView 's animationImages property. 您可以使用UIImageViewanimationImages属性。 Make NSArray with animation images (in your case, circular images those fill from 0 to full circle), set animationDuration , and call [imageView startAnimating] (I'm assuming that your UIImageView is imageView ), and you can call [imageView stopAnimating] when process is done. NSArray动画图像(在你的情况下,圆形的图像从0那些填充到完整的圆),集animationDuration和呼叫[imageView startAnimating]我假设你UIImageViewimageView ),你可以调用[imageView stopAnimating]当过程完成时。

Second: Check out this link http://www.cocoacontrols.com/platforms/ios/controls/jpradialactivityindicator , I think that sample project does the almost same, as you are trying to do :) 第二:查看此链接http://www.cocoacontrols.com/platforms/ios/controls/jpradialactivityindicator ,我认为示例项目与您尝试做的几乎相同:)

Good Luck ;) 祝好运 ;)

1) You can use CAShapeLayer 1)您可以使用CAShapeLayer

  • You can achieve it by animating the strokeStart and strokeEnd properties. 您可以通过对strokeStart和strokeEnd属性设置动画来实现。 You could create the path for the full circle and use the strokeStart and strokeEnd properties to only stroke a certain part of the circle. 您可以创建整个圆的路径,并使用strokeStart和strokeEnd属性仅绘制圆的特定部分。

2) Also, you can refer to this tutorial : Animating Pie Slices Using a Custom CALayer 2)另外,您可以参考本教程: 使用自定义CALayer动画饼图

Good Luck!!! 祝好运!!!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM