iOS 오디 오 진행 막대 효과 구현

며칠 전 개발 군 에서 한 노형 이 개발 문 제 를 물 었 다.그들의 수 요 는 오디 오 진도 와 비슷 한 것 을 만 드 는 것 이 었 다.나 는 디자인 이 괜 찮 은 것 같 아서 작은 demo 를 써 서 모두 에 게 참고 하도록 제공 하고 그의 동 의 를 얻 은 상황 에서 이 글 을 썼 다.
말 이 많 지 않 으 면 먼저 효과 도 를 올 려 라.

이 효 과 를 보 았 을 때 나 는 상대 적 으로 어 려 운 점 이 두 가지 가 있다 고 느 꼈 다.
1.이 진도 항목 의 진도 색상 변화 입 니 다.여기 서 생각 이 비교적 뚜렷 합 니 다.layer 의 mask 로 직접 하면 됩 니 다.
둘째,두 번 째 는 바로 이 각 조목 의 높이 가 일치 하지 않 고 규칙 적 이지 않다 는 것 이다.각 방법 에서 나 는 최종 적 으로 무 작위 숫자 로 하 는 것 을 선택 했다.
『8195』좋 습 니 다.생각 이 뚜렷 해 지면 코드 를 훑 기 시작 합 니 다.
먼저 View CYXAudioProgressView 를 만 듭 니 다.

@interface CYXAudioProgressView : UIView
//        
@property (assign, nonatomic) CGFloat persentage;
//         0~1
-(void)setAnimationPersentage:(CGFloat)persentage;
/**
    layer    frame       
 */
-(void)initLayers;
@end

구성원 변수 및 초기 화 방법

/*    */
#define kDrawMargin 4
#define kDrawLineWidth 8
/*  */
#define differenceValue 51
@interface CYXAudioProgressView ()<CAAnimationDelegate>

/*       */
@property (nonatomic,strong) CAShapeLayer *shapeLayer;
/*    */
@property (nonatomic,strong) CAShapeLayer *backColorLayer;
@property (nonatomic,strong) CAShapeLayer *maskLayer;
@end
@implementation CYXAudioProgressView

-(instancetype)initWithFrame:(CGRect)frame{
 if (self = [super initWithFrame:frame]) {
 self.backgroundColor = [UIColor blackColor];
 [self.layer addSublayer:self.shapeLayer];
 [self.layer addSublayer:self.backColorLayer];
 self.persentage = 0.0;
 }
 return self;
}

그림 그리 기 방법:

/**
    layer    frame       
 */
-(void)initLayers{
 [self initStrokeLayer];
 [self setBackColorLayer];
}

경로 그리 기

/*  */
-(void)initStrokeLayer{
 UIBezierPath *path = [UIBezierPath bezierPath];
 CGFloat maxWidth = self.frame.size.width;
 CGFloat drawHeight = self.frame.size.height;
 CGFloat x = 0.0;
 while (x+kDrawLineWidth<=maxWidth) {
 CGFloat random =5+ arc4random()%differenceValue;//   1-50    
 NSLog(@"%f",random);
 [path moveToPoint:CGPointMake(x-kDrawLineWidth/2, random)];
 [path addLineToPoint:CGPointMake(x-kDrawLineWidth/2, drawHeight-random)];
 x+=kDrawLineWidth;
 x+=kDrawMargin;
 }
 self.shapeLayer.path = path.CGPath;
 self.backColorLayer.path = path.CGPath;
}

노란색 경 로 를 표시 하기 위해 마스크 설정

/*  masklayer*/
-(void)setBackColorLayer{
 UIBezierPath *path = [UIBezierPath bezierPath];
 [path moveToPoint:CGPointMake(0, self.frame.size.height/2)];
 [path addLineToPoint:CGPointMake(self.frame.size.width, self.frame.size.height/2)];
 self.maskLayer.frame = self.bounds;
 self.maskLayer.lineWidth = self.frame.size.width;
 self.maskLayer.path= path.CGPath;
 self.backColorLayer.mask = self.maskLayer;
}

백분율 을 수 동 으로 설정 하 는 두 가지 방법

-(void)setAnimationPersentage:(CGFloat)persentage{
 CGFloat startPersentage = self.persentage;
 [self setPersentage:persentage];

 CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
 pathAnimation.duration = 1;
 pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
 pathAnimation.fromValue = [NSNumber numberWithFloat:startPersentage];
 pathAnimation.toValue = [NSNumber numberWithFloat:persentage];
 pathAnimation.autoreverses = NO;
 pathAnimation.delegate = self;
 [self.maskLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
}
/**
 *          ，       
 *
 * @param persentage    
 */
- (void)setPersentage:(CGFloat)persentage {

 _persentage = persentage;
 self.maskLayer.strokeEnd = persentage;
}

최종 사용

- (void)viewDidLoad {
 [super viewDidLoad];
 // Do any additional setup after loading the view, typically from a nib.
 self.view.backgroundColor = [UIColor whiteColor];

 self.loopProgressView.frame =CGRectMake(0, 100, self.view.frame.size.width, 150);
 [self.loopProgressView initLayers];
 [self.view addSubview:self.loopProgressView];
 dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
 [self.loopProgressView setAnimationPersentage:0.5];
 });

 self.slider.frame = CGRectMake(30, self.view.frame.size.height-60, self.view.frame.size.width-30*2, 20);
 [self.view addSubview:self.slider];
}

이상 은 상술 한 효 과 를 간단하게 실현 하 였 으 니 문제 가 있 으 면 가르침 을 환영 합 니 다.
Demo: https://github.com/SionChen/CYXAudioProgressView
총결산
위 에서 말씀 드 린 것 은 편집장 님 께 서 소개 해 주신 iOS 가 오디 오 진도 바 효 과 를 실현 하 는 것 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!