动画 UIView 帧 0 到 360 度作为歌曲进度条

Posted 2023-03-13

【中文标题】动画 UIView 帧 0 到 360 度作为歌曲进度条

【英文标题】：animate an UIView frame 0 to 360 degree as song progress bar

【发布时间】：2015-06-30 13:28:41

【问题描述】：

我正在播放来自互联网的音频歌曲，我想以这样的方式显示歌曲进度-

请帮助我如何在歌曲持续时间中将 UIView 帧从 0 度设置为 360 度。

【问题讨论】：

请向我们展示您的尝试。

【参考方案1】：

这里是一些用于绘制所示两个圆圈的代码。请注意，您必须在活动的 CGContext 中进行绘制。如果您有任何问题，请不要犹豫。

目标-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];

斯威夫特：

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

【讨论】：

问题被标记为 Objective-C，而不是 Swift。请以适当的语言发布答案。

抱歉 - 没有查看标签。 @user3185320 请查看更新后的答案。

【参考方案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;    
    

【参考方案3】：

试试这个

self.imageview.transform = CGAffineTransformMakeRotation(M_PI_2);

【讨论】：

这将旋转一个视图，但它是如何随着时间的推移填满馅饼的呢？