-4

I am playing audio songs from internet , I want to show the song progress something like this- progress indicator

please help me how to animate UIView frame from 0 to 360 degree in song time duration.

1
  • Please show us what you have tried.
    – rghome
    Jun 30, 2015 at 13:51

3 Answers 3

0

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()
2
  • The question is tagged Objective-C, not Swift. Please post answers in the appropriate language.
    – rmaddy
    Jun 30, 2015 at 14:41
  • Sorry - didn't look at the tags. @user3185320 please see updated answer. Jun 30, 2015 at 15:29
0

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;    
    }

}
-2

Try this

self.imageview.transform = CGAffineTransformMakeRotation(M_PI_2);
1
  • 1
    That will rotate a view, but how does that fill the pie wedge up with time? Jun 30, 2015 at 14:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.