如何使用逆时针动画显示自定义圆形进度条？

Posted 2023-02-23

技术标签:

【中文标题】如何使用逆时针动画显示自定义圆形进度条？【英文标题】：How to display custom circular progress bar with Anti-Clockwise animation? 【发布时间】：2014-07-03 13:54:48 【问题描述】：

我正在使用与测验相关的应用程序。此处将显示自定义圆形进度条，该进度条基于正确答案除以总问题并乘以 100 的百分比值。并以百分比形式获取结果值，然后将结果值除以 100 以获得浮点值，因为进度动画值是“0.0 到 1.0” 这里我使用库“DACCircularProgressView”。现在使用顺时针动画的进度。但我需要逆时针动画。

如果有人知道，请给出建议。我真的不知道如何在“DACCircularProgressView”中更改旋转动画。

    //
//  DACircularProgressView.h
//  DACircularProgress
//
//  Created by Daniel Amitay on 2/6/12.
//  Copyright (c) 2012 Daniel Amitay. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface DACircularProgressView : UIView

@property(nonatomic, strong) UIColor *trackTintColor UI_APPEARANCE_SELECTOR;
@property(nonatomic, strong) UIColor *progressTintColor UI_APPEARANCE_SELECTOR;
@property(nonatomic) NSInteger roundedCorners UI_APPEARANCE_SELECTOR; // Can not use BOOL with UI_APPEARANCE_SELECTOR :-(
@property(nonatomic) CGFloat thicknessRatio UI_APPEARANCE_SELECTOR;
@property(nonatomic) CGFloat progress;

@property(nonatomic) CGFloat indeterminateDuration UI_APPEARANCE_SELECTOR;
@property(nonatomic) NSInteger indeterminate UI_APPEARANCE_SELECTOR; // Can not use BOOL with UI_APPEARANCE_SELECTOR :-(

- (void)setProgress:(CGFloat)progress animated:(BOOL)animated;

@end


//
//  DACircularProgressView.m
//  DACircularProgress
//
//  Created by Daniel Amitay on 2/6/12.
//  Copyright (c) 2012 Daniel Amitay. All rights reserved.
//

#import "DACircularProgressView.h"

#import <QuartzCore/QuartzCore.h>

@interface DACircularProgressLayer : CALayer

@property(nonatomic, strong) UIColor *trackTintColor;
@property(nonatomic, strong) UIColor *progressTintColor;
@property(nonatomic) NSInteger roundedCorners;
@property(nonatomic) CGFloat thicknessRatio;
@property(nonatomic) CGFloat progress;

@end

@implementation DACircularProgressLayer

@dynamic trackTintColor;
@dynamic progressTintColor;
@dynamic roundedCorners;
@dynamic thicknessRatio;
@dynamic progress;

+ (BOOL)needsDisplayForKey:(NSString *)key

    return [key isEqualToString:@"progress"] ? YES : [super needsDisplayForKey:key];


- (void)drawInContext:(CGContextRef)context

    CGRect rect = self.bounds;
    CGPoint centerPoint = CGPointMake(rect.size.height / 2, rect.size.width / 2);
    CGFloat radius = MIN(rect.size.height, rect.size.width) / 2;

    CGFloat progress = MIN(self.progress, 1.f - FLT_EPSILON);
    CGFloat radians = (progress * 2 * M_PI) - M_PI_2;

    CGContextSetFillColorWithColor(context, self.trackTintColor.CGColor);
    CGMutablePathRef trackPath = CGPathCreateMutable();
    CGPathMoveToPoint(trackPath, NULL, centerPoint.x, centerPoint.y);
    CGPathAddArc(trackPath, NULL, centerPoint.x, centerPoint.y, radius, 3 * M_PI_2, -M_PI_2, NO);
    CGPathCloseSubpath(trackPath);
    CGContextAddPath(context, trackPath);
    CGContextFillPath(context);
    CGPathRelease(trackPath);

    if (progress > 0.f)
    
        CGContextSetFillColorWithColor(context, self.progressTintColor.CGColor);
        CGMutablePathRef progressPath = CGPathCreateMutable();
        CGPathMoveToPoint(progressPath, NULL, centerPoint.x, centerPoint.y);
        CGPathAddArc(progressPath, NULL, centerPoint.x, centerPoint.y, radius, 3 * M_PI_2, radians, NO);
        CGPathCloseSubpath(progressPath);
        CGContextAddPath(context, progressPath);
        CGContextFillPath(context);
        CGPathRelease(progressPath);
    

    if (progress > 0.f && self.roundedCorners)
    
        CGFloat pathWidth = radius * self.thicknessRatio;
        CGFloat xOffset = radius * (1.f + ((1 - (self.thicknessRatio / 2.f)) * cosf(radians)));
        CGFloat yOffset = radius * (1.f + ((1 - (self.thicknessRatio / 2.f)) * sinf(radians)));
        CGPoint endPoint = CGPointMake(xOffset, yOffset);

        CGContextAddEllipseInRect(context, CGRectMake(centerPoint.x - pathWidth / 2, 0, pathWidth, pathWidth));
        CGContextFillPath(context);

        CGContextAddEllipseInRect(context, CGRectMake(endPoint.x - pathWidth / 2, endPoint.y - pathWidth / 2, pathWidth, pathWidth));
        CGContextFillPath(context);
    

    CGContextSetBlendMode(context, kCGBlendModeClear);
    CGFloat innerRadius = radius * (1.f - self.thicknessRatio);
    CGPoint newCenterPoint = CGPointMake(centerPoint.x - innerRadius, centerPoint.y - innerRadius);
    CGContextAddEllipseInRect(context, CGRectMake(newCenterPoint.x, newCenterPoint.y, innerRadius * 2, innerRadius * 2));
    CGContextFillPath(context);


@end

@implementation DACircularProgressView

+ (void) initialize

    if (self != [DACircularProgressView class])
        return;

    id appearance = [self appearance];
    [appearance setTrackTintColor:[[UIColor whiteColor] colorWithAlphaComponent:0.3f]];
    [appearance setProgressTintColor:[UIColor whiteColor]];
    [appearance setThicknessRatio:0.3f];
    [appearance setRoundedCorners:NO];

    [appearance setIndeterminateDuration:2.0f];
    [appearance setIndeterminate:NO];


+ (Class)layerClass

    return [DACircularProgressLayer class];


- (DACircularProgressLayer *)circularProgressLayer

    return (DACircularProgressLayer *)self.layer;


- (id)init

    return [self initWithFrame:CGRectMake(0.0f, 0.0f, 40.0f, 40.0f)];


- (id)initWithFrame:(CGRect)frame

    self = [super initWithFrame:frame];
    if (self)
    
        self.backgroundColor = [UIColor clearColor];
    
    return self;


- (void)didMoveToWindow

    self.circularProgressLayer.contentsScale = [UIScreen mainScreen].scale;


#pragma mark - Progress

-(CGFloat)progress

    return self.circularProgressLayer.progress;


- (void)setProgress:(CGFloat)progress

    [self setProgress:progress animated:NO];


- (void)setProgress:(CGFloat)progress animated:(BOOL)animated

    CGFloat pinnedProgress = MIN(MAX(progress, 0.f), 1.f);
    if (animated)
    
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"progress"];
        animation.duration = fabsf(self.progress - pinnedProgress); // Same duration as UIProgressView animation
        animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        animation.fromValue = [NSNumber numberWithFloat:self.progress];
        animation.toValue = [NSNumber numberWithFloat:pinnedProgress];
        [self.circularProgressLayer addAnimation:animation forKey:@"progress"];
//        [self.circularProgressLayer setFrame:CGRectMake(3, 3, 40, 40)];
    
    else
    
        [self.circularProgressLayer setNeedsDisplay];
    
    self.circularProgressLayer.progress = pinnedProgress;


#pragma mark - UIAppearance methods

- (UIColor *)trackTintColor

    return self.circularProgressLayer.trackTintColor;


- (void)setTrackTintColor:(UIColor *)trackTintColor

    self.circularProgressLayer.trackTintColor = trackTintColor;
    [self.circularProgressLayer setNeedsDisplay];


- (UIColor *)progressTintColor

    return self.circularProgressLayer.progressTintColor;


- (void)setProgressTintColor:(UIColor *)progressTintColor

    self.circularProgressLayer.progressTintColor = progressTintColor;
    [self.circularProgressLayer setNeedsDisplay];


- (NSInteger)roundedCorners

    return self.roundedCorners;


-(void)setRoundedCorners:(NSInteger)roundedCorners

    self.circularProgressLayer.roundedCorners = roundedCorners;
    [self.circularProgressLayer setNeedsDisplay];


-(CGFloat)thicknessRatio

    return self.circularProgressLayer.thicknessRatio;


- (void)setThicknessRatio:(CGFloat)thicknessRatio

    self.circularProgressLayer.thicknessRatio = MIN(MAX(thicknessRatio, 0.f), 1.f);
    [self.circularProgressLayer setNeedsDisplay];


- (NSInteger)indeterminate

    CAAnimation *spinAnimation = [self.layer animationForKey:@"indeterminateAnimation"];
    return spinAnimation;


- (void)setIndeterminate:(NSInteger)indeterminate

    if (indeterminate && !self.indeterminate)
    
        CABasicAnimation *spinAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
        spinAnimation.byValue = [NSNumber numberWithFloat:2.0f*M_PI];
        spinAnimation.duration = self.indeterminateDuration;
        spinAnimation.repeatCount = HUGE_VALF;
        [self.layer addAnimation:spinAnimation forKey:@"indeterminateAnimation"];
    
    else
    
        [self.layer removeAnimationForKey:@"indeterminateAnimation"];
    


@end

在我自己的班级里，

    self.largeProgressView = [[DACircularProgressView alloc] initWithFrame:CGRectMake(10.0f, 85.0f, 78.0f, 78.0f)];
self.largeProgressView.roundedCorners    = NO;
        self.largeProgressView.trackTintColor    = THIK_GRAY_COLOR;
        self.largeProgressView.progressTintColor = LIGHT_GREEN_COLOR;
        self.largeProgressView.thicknessRatio    = 0.2f;
        [self.largeProgressView setBackgroundColor:[UIColor clearColor]];
        [resultatsCategoryView addSubview:self.largeProgressView];

total   = [TotalQuestionsCount floatValue];
        current = [CorrectAnswersCount floatValue];
        percentageCompleted = current / total * 100;
        percentageCompleted = percentageCompleted / 100;
        //NSLog(@"percentageCompleted = %f",percentageCompleted);

        for (DACircularProgressView *progressView in [NSArray arrayWithObjects:self.largeProgressView, nil])
        
            CGFloat progress = percentageCompleted;
            //NSLog(@"progress = %f",progress);
            [progressView setProgress:progress animated:YES];

            if (progressView.progress >= 1.0f && [self.timer isValid])
            
                [progressView setProgress:0.f animated:YES];

【问题讨论】：

嘿任何人请给一些建议，这是紧急的。我发布了答案检查它，可能对你有帮助.. :) @Shan 谢谢你的回复。我会检查的。我修改了代码并用gif文件重新发布，请检查它 【参考方案1】：

使用下面的代码，我将上面的 .m 文件更改为下面的 .m 文件希望对你有帮助

 #import "DACircularProgressView.h"

 #import <QuartzCore/QuartzCore.h>

 @interface DACircularProgressLayer : CALayer

 @property(nonatomic, strong) UIColor *trackTintColor;
 @property(nonatomic, strong) UIColor *progressTintColor;
 @property(nonatomic) NSInteger roundedCorners;
 @property(nonatomic) CGFloat thicknessRatio;
 @property(nonatomic) CGFloat progress;

 @end

 @implementation DACircularProgressLayer

 @dynamic trackTintColor;
 @dynamic progressTintColor;
 @dynamic roundedCorners;
 @dynamic thicknessRatio;
 @dynamic progress;

 + (BOOL)needsDisplayForKey:(NSString *)key
 
    return [key isEqualToString:@"progress"] ? YES : [super needsDisplayForKey:key];
 

 - (void)drawInContext:(CGContextRef)context
 
    CGRect rect = self.bounds;
    CGPoint centerPoint = CGPointMake(rect.size.height / 2.0f, rect.size.width / 2.0f);
    CGFloat radius = MIN(rect.size.height, rect.size.width) / 2.0f;

    CGFloat progress = MIN(self.progress, 1.0f - FLT_EPSILON);
    CGFloat radians = (progress * 2.0f * -M_PI) - M_PI_2;

    CGContextSetFillColorWithColor(context, self.trackTintColor.CGColor);
    CGMutablePathRef trackPath = CGPathCreateMutable();
    CGPathMoveToPoint(trackPath, NULL, centerPoint.x, centerPoint.y);
    CGPathAddArc(trackPath, NULL, centerPoint.x, centerPoint.y, radius, 3.0f * -M_PI_2, M_PI_2, NO);
    CGPathCloseSubpath(trackPath);
    CGContextAddPath(context, trackPath);
    CGContextFillPath(context);
    CGPathRelease(trackPath);

    if (progress > 0.0f)
    
       CGContextSetFillColorWithColor(context, self.progressTintColor.CGColor);
       CGMutablePathRef progressPath = CGPathCreateMutable();
       CGPathMoveToPoint(progressPath, NULL, centerPoint.x, centerPoint.y);
       CGPathAddArc(progressPath, NULL, centerPoint.x, centerPoint.y, radius, 3.0f * M_PI_2, radians, NO);
       CGPathCloseSubpath(progressPath);
       CGContextAddPath(context, progressPath);
       CGContextFillPath(context);
       CGPathRelease(progressPath);
    

    if (progress > 0.0f && self.roundedCorners)
    
        CGFloat pathWidth = radius * self.thicknessRatio;
        CGFloat xOffset = radius * (1.0f + ((1.0f - (self.thicknessRatio / 2.0f)) * cosf(radians)));
        CGFloat yOffset = radius * (1.0f + ((1.0f - (self.thicknessRatio / 2.0f)) * sinf(radians)));
        CGPoint endPoint = CGPointMake(xOffset, yOffset);

        CGContextAddEllipseInRect(context, CGRectMake(centerPoint.x - pathWidth / 2.0f, 0.0f, pathWidth, pathWidth));
        CGContextFillPath(context);

        CGContextAddEllipseInRect(context, CGRectMake(endPoint.x - pathWidth / 2.0f, endPoint.y - pathWidth / 2.0f, pathWidth, pathWidth));
        CGContextFillPath(context);
     

     CGContextSetBlendMode(context, kCGBlendModeClear);
     CGFloat innerRadius = radius * (1.0f - self.thicknessRatio);
     CGPoint newCenterPoint = CGPointMake(centerPoint.x - innerRadius, centerPoint.y - innerRadius);
     CGContextAddEllipseInRect(context, CGRectMake(newCenterPoint.x, newCenterPoint.y, innerRadius * 2.0f, innerRadius * 2.0f));
     CGContextFillPath(context);
 

 @end

 @interface DACircularProgressView ()

 @end

 @implementation DACircularProgressView

 + (void) initialize
 
    if (self != [DACircularProgressView class])
    return;

    id appearance = [self appearance];
    [appearance setTrackTintColor:[[UIColor whiteColor] colorWithAlphaComponent:0.3f]];
    [appearance setProgressTintColor:[UIColor whiteColor]];
    [appearance setBackgroundColor:[UIColor clearColor]];
    [appearance setThicknessRatio:0.3f];
    [appearance setRoundedCorners:NO];

    [appearance setIndeterminateDuration:5.0f];
    [appearance setIndeterminate:NO];
 

 + (Class)layerClass
 
    return [DACircularProgressLayer class];
 

 - (DACircularProgressLayer *)circularProgressLayer
 
    return (DACircularProgressLayer *)self.layer;
 

 - (id)init
 
    return [super initWithFrame:CGRectMake(0.0f, 0.0f, 40.0f, 40.0f)];
 

 - (void)didMoveToWindow
    
   CGFloat windowContentsScale = self.window.screen.scale;
   self.circularProgressLayer.contentsScale = windowContentsScale;
 

 #pragma mark - Progress

 - (CGFloat)progress
 
    return self.circularProgressLayer.progress;
 

 - (void)setProgress:(CGFloat)progress
 
    [self setProgress:progress animated:NO];
 

 - (void)setProgress:(CGFloat)progress animated:(BOOL)animated
  
   [self.layer removeAnimationForKey:@"indeterminateAnimation"];
   [self.circularProgressLayer removeAnimationForKey:@"progress"];

   CGFloat pinnedProgress = MIN(MAX(progress, 0.0f), 1.0f);
   if (animated)
    
      CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"progress"];
     //  animation.duration = fabsf(self.progress - pinnedProgress); // Same duration as UIProgressView animation
     animation.duration = 10.0f;
     animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
   //  animation.fromValue = [NSNumber numberWithFloat:self.progress];
   //  animation.toValue = [NSNumber numberWithFloat:pinnedProgress];

      animation.fromValue = [NSNumber numberWithFloat:pinnedProgress];
      animation.toValue = [NSNumber numberWithFloat:self.progress];
     [self.circularProgressLayer addAnimation:animation forKey:@"progress"];
  
  else
  
     [self.circularProgressLayer setNeedsDisplay];
  
  self.circularProgressLayer.progress = pinnedProgress;


#pragma mark - UIAppearance methods

- (UIColor *)trackTintColor

   return self.circularProgressLayer.trackTintColor;


- (void)setTrackTintColor:(UIColor *)trackTintColor

   self.circularProgressLayer.trackTintColor = trackTintColor;
   [self.circularProgressLayer setNeedsDisplay];


- (UIColor *)progressTintColor

  return self.circularProgressLayer.progressTintColor;
 

- (void)setProgressTintColor:(UIColor *)progressTintColor

   self.circularProgressLayer.progressTintColor = progressTintColor;
   [self.circularProgressLayer setNeedsDisplay];
 

 - (NSInteger)roundedCorners

   return self.roundedCorners;


- (void)setRoundedCorners:(NSInteger)roundedCorners

   self.circularProgressLayer.roundedCorners = roundedCorners;
   [self.circularProgressLayer setNeedsDisplay];


- (CGFloat)thicknessRatio

   return self.circularProgressLayer.thicknessRatio;


- (void)setThicknessRatio:(CGFloat)thicknessRatio

   self.circularProgressLayer.thicknessRatio = MIN(MAX(thicknessRatio, 0.f), 1.f);
   [self.circularProgressLayer setNeedsDisplay];


- (NSInteger)indeterminate

    CAAnimation *spinAnimation = [self.layer animationForKey:@"indeterminateAnimation"];
    return (spinAnimation == nil ? 0 : 1);


 - (void)setIndeterminate:(NSInteger)indeterminate

    if (indeterminate && !self.indeterminate)
    
       CABasicAnimation *spinAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
       spinAnimation.byValue = [NSNumber numberWithFloat:indeterminate > 0 ? -2.0f*M_PI : 2.0f*M_PI];
       spinAnimation.duration = self.indeterminateDuration;
       spinAnimation.repeatCount = HUGE_VALF;
       [self.layer addAnimation:spinAnimation forKey:@"indeterminateAnimation"];
    
    else
    
      [self.layer removeAnimationForKey:@"indeterminateAnimation"];
    
 

 @end

我修改了示例项目，项目的输出如下所示

我不认为上面的结果是顺时针旋转，视频最后会被截断，它会逆时针方向旋转.. 请检查一下，我再次重新发布了代码。检查一下

你可以在DACircularProgressView.m中下载修改为反时钟动画的project hear but animating clock wise

【讨论】：

它不会逆时针动画。像往常一样，它是顺时针动画。上面的gif文件显示了向后的动画。我不想根据百分比值从左侧填充颜色到右侧结束。如果您知道解决方案，请提供一些建议。

以上是关于如何使用逆时针动画显示自定义圆形进度条？的主要内容，如果未能解决你的问题，请参考以下文章

带有实心圆圈的自定义圆形进度条

Android 圆形进度条控件

自定义控件——圆形圆点进度条（仿安全卫士中的一键加速）

Android自定义view之圆形进度条

C# 自定义控件（圆形进度条） Xamarin Forms

如何给progressbar圆形进度条设置颜色