将 0 到 360 度的 UIView 帧动画化为歌曲进度条

Question

我正在播放互联网上的音频歌曲，我想像这样显示歌曲进度-

请帮助我如何在歌曲持续时间内将 UIView 框架从 0 度动画化到 360 度。

Answer 1

试试这个

self.imageview.transform = CGAffineTransformMakeRotation(M_PI_2);

Answer 2

下面是一些用于绘制所示两个圆圈的代码。请注意，您必须在活动的 CGContext 中绘制。如果您有任何问题，请随时提问。

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 3

我自己完成了寻找，我想一步一步分享我的答案 - 首先我创建了一个自定义 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

现在我在像这样的单元格中使用我的自定义 class -

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

}

将 0 到 360 度的 UIView 帧动画化为歌曲进度条

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

objective-c

uiview

ios

ios-animations

CircleView.h

CircleView.m