animate an UIView frame 0 to 360 degree as song progress bar - ios

Question

I am playing audio songs from internet , I want to show the song progress something like this-
please help me how to animate UIView frame from 0 to 360 degree in song time duration.

Answer 1

Here is some code for drawing the two circles shown. Note that you will have to draw in an active CGContext. If you have any questions don't hesitate to ask.
Objective-C:
float percentDone = 0.25 //set this from 0 to 1
CGSize imageSize = CGSizeMake(88, 88)
//// Color Declarations
UIColor* pieColor = [UIColor colorWithRed: 0 green: 0.245 blue: 1 alpha: 1];
UIColor* background = [UIColor colorWithRed: 0.645 green: 0.645 blue: 0.645 alpha: 1];
//// Background gray circle
UIBezierPath* ovalPath = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(0, 0, imageSize.width, imageSize.height))];
[background setFill];
[ovalPath fill];
//// Foreground progress wedge
CGRect oval2Rect = CGRectMake(0.f, 0.f, imageSize.width, imageSize.height);
UIBezierPath* oval2Path = UIBezierPath.bezierPath;
[oval2Path addArcWithCenter: CGPointMake(CGRectGetMidX(oval2Rect), CGRectGetMidY(oval2Rect)) radius: CGRectGetWidth(oval2Rect) / 2 startAngle: 270 * M_PI/180 endAngle: endAngle clockwise: YES];
[oval2Path addLineToPoint: CGPointMake(CGRectGetMidX(oval2Rect), CGRectGetMidY(oval2Rect))];
[oval2Path closePath];
[pieColor setFill];
[oval2Path fill];
Swift:
var percentDone = 0.25 //set this from 0 to 1
var imageSize = CGSizeMake(88, 88)
let endAngle = -(360.0 * percentDone) * CGFloat(M_PI)/180
//// Color Declarations
let pieColor = UIColor(red: 0.000, green: 0.245, blue: 1.000, alpha: 1.000)
let background = UIColor(red: 0.645, green: 0.645, blue: 0.645, alpha: 1.000)
//// Background gray circle
var ovalPath = UIBezierPath(ovalInRect: CGRectMake(0, 0, imageSize.width, imageSize.height))
background.setFill()
ovalPath.fill()
//// Foreground progress wedge
var oval2Rect = CGRectMake(0, 0, imageSize.width, imageSize.height)
var oval2Path = UIBezierPath()
oval2Path.addArcWithCenter(CGPointMake(oval2Rect.midX, oval2Rect.midY), radius: oval2Rect.width / 2, startAngle: 270 * CGFloat(M_PI)/180, endAngle: endAngle, clockwise: true)
oval2Path.addLineToPoint(CGPointMake(oval2Rect.midX, oval2Rect.midY))
oval2Path.closePath()
pieColor.setFill()
oval2Path.fill()

Answer 2

I done it my self as was looking for, i would like to share my answer step by step - First of all I created a custom UIView class CircleView -
CircleView.h
#import <UIKit/UIKit.h>
#interface CircleView : UIView
{
CGFloat startAngle;
CGFloat endAngle;
}
#property (nonatomic,assign) float percent;
#end
CircleView.m
#import "CircleView.h"
#implementation CircleView
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
// Initialization code
self.backgroundColor = [UIColor clearColor];
// Determine our start and stop angles for the arc (in radians)
startAngle = M_PI * 1.5;
endAngle = startAngle - (M_PI * 2);
}
return self;
}
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(context, self.center.x, self.center.y);
CGContextAddArc(context, self.center.x, self.center.y, rect.size.height/2, 360 , 0, 1);
CGContextSetRGBFillColor(context, 16.0/255.0f, 132.0/255.0f, 254.0/255.0f, 1.0f);
CGContextDrawPath(context, kCGPathFill);
CGContextSetRGBFillColor(context, 223.0f/255.0f, 224.0f/255.0f, 225.0/255.0, 1.0);
CGContextMoveToPoint(context, self.center.x, self.center.y);
CGContextAddArc(context, self.center.x, self.center.y, rect.size.height/2, startAngle , (endAngle - startAngle) * (_percent / 100.0) + startAngle, 1);
CGContextDrawPath(context, kCGPathFill);
}
#end
Now I used my custom class in cell something like this -
-(void)ReDrawCirculerView:(UIView *)viewHoldingCirculerView
{
[circleView removeFromSuperview];
circleView = [[CircleView alloc] initWithFrame:viewHoldingCirculerView.bounds];
circleView.percent=100.0;
[viewHoldingCirculerView addSubview:circleView];
[self.m_timer invalidate];
self.m_timer = nil;
NSTimeInterval playedTime = yourplayedtimeduration;
NSTimeInterval totaltime = totaltimeduration;
if(playedTime>0 && totaltime>0 && totaltime>playedTime)
{
float percentageplayed = playedTime*100/totaltime ;
circleView.percent= 100-percentageplayed;
}
self.m_timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:#selector(ProgressSpin:) userInfo:nil repeats:YES];
}
- (void)ProgressSpin:(NSTimer *)timer
{
NSTimeInterval interval = 0.0;
NSTimeInterval playedTime = yoursonplayedduration;
NSTimeInterval totaltime = totalsonduration;
if(playedTime>0 && totaltime>0 && totaltime>playedTime)
{
interval =(totaltime-playedTime);
}
else
{ NSLog(#"$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$%f====%f",circleView.percent,interval);
return;
}
// If we can decrement our percentage, do so, and redraw the view
if (circleView.percent > 0 )
{
if(isinf(circleView.percent/interval))
{
return;
}
circleView.percent = circleView.percent - circleView.percent/interval;
self.previousTimeInterval = interval;
[circleView setNeedsDisplay];
}
else
{
[self.m_timer invalidate];
self.m_timer = nil;
}
}

Answer 3

Try this
self.imageview.transform = CGAffineTransformMakeRotation(M_PI_2);