关键词:
【中文标题】如何使用逆时针动画显示自定义圆形进度条?【英文标题】: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之自定义圆形进度条
...作时,会通过展示一个进度条来显示“加载中...”的动画作为友好页面以提高用户体验。对于这样的进度条,最简单的实现方式就是通过美工给我们切几张不同的图片,最后通过帧动画的方式来实现。通过帧动画实现... 查看详情
C# 自定义控件(圆形进度条) Xamarin Forms
...东西的最佳方法:我从来没有创造过这样的东西。我知道如何使用进度条,但不知道“圆形进度条”感谢您的帮助和任何提示。编辑:如果你有一个插件/nuget来做到这一点,那很 查看详情
如何更改圆形进度条的颜色?
】如何更改圆形进度条的颜色?【英文标题】:Howtochangecolorincircularprogressbar?【发布时间】:2011-07-1707:03:54【问题描述】:我在Android上使用循环进度条。我想改变它的颜色。我正在使用"?android:attr/progressBarStyleLargeInverse"风格。那... 查看详情
为啥自定义进度条在android中没有动画?
...条第1期:第一个问题是进度条只是显示而不是动画,我使用asynctask在后台从外部数据库加载大量数据。第二个问题:第二个问题是 查看详情
自定义控件——圆形圆点进度条(仿安全卫士中的一键加速)
...时间才把它搞定,先看效果图:3种显示模式:模拟进度动画效果:说 查看详情
android自定义view之圆形进度条
这段时间正在学习自定义View以及属性动画的知识,然后刚好用这个来练练手,无图无真相,直接看图:简单自定义了一个比较通用的圆形进度条,像上图所示的可以定义圆的半径,进度颜色,宽度... 查看详情
如何在 Android 中自定义进度条
】如何在Android中自定义进度条【英文标题】:HowtoCustomizeaProgressBarInAndroid【发布时间】:2013-05-2909:29:34【问题描述】:我正在开发一个应用程序,我想在其中显示ProgressBar,但我想替换默认的AndroidProgressBar。那么如何自定义Progres... 查看详情
首页2--动态自定义圆形进度条
A.绘制圆环,圆弧,文本//1.画圆环//原点坐标floatcircleX=width/2;floatcircleY=width/2;//半径floatradius=width/2-roundWidth/2;//设置画笔的属性paint.setColor(roundColor);paint.setStrokeWidth(roundWidth);paint.setStyle(Paint.Style. 查看详情
如何给progressbar圆形进度条设置颜色
参考技术AAndroid中ProgressBar自定义进度条的高度、颜色、圆角很多人知道怎么改颜色,可是改高度就是胡扯了,居然想通过maxHeight去改。准确方法在这里:下面这个改成了3-5个dp高度:首先是样式文件,这里定义高度:本回答被... 查看详情
composecanvas自定义圆形进度条(代码片段)
@ComposablefunCircleRing(boxWidthDp:Int,viewModel:TaskViewModel)Canvas(modifier=Modifier.size(boxWidthDp.dp),onDraw=valstrokWidth=30F//灰色背景drawArc(Color(0,0,0,15),startAngle=160f,s 查看详情
酷炫进度条自定义seekbar(代码片段)
...、一个水平进度条和一个圆形进度条;3、圆形进度条显示环形刻度和当前进度值;4、并且圆形进度可滑动操作;最终实现效果:废话不多说上代码:水平的进度条ÿ 查看详情
酷炫进度条自定义seekbar
...、一个水平进度条和一个圆形进度条;3、圆形进度条显示环形刻度和当前进度值 查看详情
html5动画:canvas实现圆形进度条并显示数字百分比
实现效果1.首先创建html代码<canvasid="canvas"width="500"height="500"style="background:#000;"></canvas>2.创建canvas环境varcanvas=document.getElementById(‘canvas‘),//获取canvas元素context=canvas.getContext(‘2d 查看详情
android自定义控件篇圆形进度条(代码片段)
一、效果图二、代码逻辑/***funcation:圆形进度条控件*/publicclassCircleProgressViewextendsViewprivatePaintmBackPaint,mProgPaint;//绘制画笔privateRectFmRectF;//绘制区域privateint[]mColorArray;//圆环渐变色privateintmProgress;//圆环进度(0-100)publicCircleProgressView(Co... 查看详情
如何在加载时加载自定义进度条
】如何在加载时加载自定义进度条【英文标题】:Howtoloadacustomprogressbaratloadingtime【发布时间】:2014-10-2908:09:53【问题描述】:我有一个要求,我需要在初始屏幕上显示进度条/活动指示器,直到我在iOS7中完成数据下载。提前致谢... 查看详情
如何只实现一个圆形进度条,直到图像被滑动加载
】如何只实现一个圆形进度条,直到图像被滑动加载【英文标题】:Howtoimplementonlyonecircularprogressbaruntilimagesareloadedwithglide【发布时间】:2021-08-2406:49:15【问题描述】:您好,我只想实现一个圆形进度动画,直到从滑行加载图像,... 查看详情
compose自定义条形进度条(代码片段)
...比View系统更方便简单,比如接下来本文要介绍的就是使用Compose实现View系统中常见的条形进度条。自定义进度条Composematerial包中提供了CircularProgressIndicator实现View系统中的圆形进度条,因为Compose没有现成的条形进度条ÿ... 查看详情
compose自定义条形进度条(代码片段)
...比View系统更方便简单,比如接下来本文要介绍的就是使用Compose实现View系统中常见的条形进度条。自定义进度条Composematerial包中提供了CircularProgressIndicator实现View系统中的圆形进度条,因为Compose没有现成的条形进度条ÿ... 查看详情