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

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

我按照自己的意愿完成了自己的工作，我想逐步分享我的答案 - 首先我创建了一个自定义的UIView类 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

现在我在单元格中使用了我的自定义类 -

     -(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);

Hope it helps.