어떻게 원형 진도표 단추를 실현합니까
예비 지식
실현 분석
구체적 실현
//
static float const maxRecordTime = 10.f;
//
static float const startRadius = 35.f;
//
static float const endRadius = 50.f;
//
static float const lineWidth = 6.f;
@interface KiraCircleButton ()
@property (nonatomic, strong) CAShapeLayer *circleLayer;//
@property (nonatomic, strong) CAShapeLayer *maskLayer;//
@property (nonatomic, strong) CAShapeLayer *drawLayer;//
@property (nonatomic, strong) CADisplayLink *displayLink;
@property (nonatomic, assign) CGFloat currentRadius; //
@property (nonatomic, strong) UIVisualEffectView* effectView;
@property (nonatomic, assign) CGPoint centerPoint;
@property (nonatomic, assign) float currentRecordTime;
@end
- (void)initUI {
self.centerPoint = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2);
[self setUserInteractionEnabled:YES];
//
UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(doSomeThingWhenTap)];
[self addGestureRecognizer:tap];
UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(doSomeThingWhenLongTap:)];
longPress.minimumPressDuration = 0.2;
longPress.delegate = self;
[self addGestureRecognizer:longPress];
//
UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleRegular];
self.effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
self.effectView.userInteractionEnabled = NO;
[self addSubview:self.effectView];
[self.effectView setFrame:CGRectMake(startRadius - endRadius, startRadius - endRadius, 2 * endRadius, 2 * endRadius)];
UIBezierPath *backPath = [UIBezierPath bezierPathWithArcCenter:self.centerPoint radius:endRadius - lineWidth/2 startAngle:- M_PI_2 endAngle:3 * M_PI_2 clockwise:YES];
CAShapeLayer *secondLayer = [CAShapeLayer layer];
secondLayer.strokeColor = [UIColor colorWithRed:1 green:64.f/255.f blue:64.f/255.f alpha:1].CGColor;
secondLayer.lineWidth = lineWidth;
secondLayer.fillColor = [UIColor clearColor].CGColor;
secondLayer.path = backPath.CGPath;
secondLayer .strokeStart = 0;
secondLayer.strokeEnd = 0;
_drawLayer = secondLayer;
_circleLayer = [CAShapeLayer layer];
_maskLayer = [CAShapeLayer layer];
[self resetCaptureButton];
[self.layer addSublayer:_circleLayer];
[self.layer setMask:_maskLayer];
[self.layer addSublayer:secondLayer];
}
- (void)doSomeThingWhenLongTap:(UILongPressGestureRecognizer *)gesture {
if (gesture.state == UIGestureRecognizerStateBegan) {
NSLog(@"Im long tapped start");
self.displayLink = [CADisplayLink displayLinkWithTarget:self
selector:@selector(changeRadius)];
[self.displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
self.displayLink.paused = NO;
if (self.delegate && [self.delegate respondsToSelector:@selector(startProgress)]) {
[self.delegate startProgress];
}
} else if (gesture.state == UIGestureRecognizerStateEnded) {
NSLog(@"Im long tapped end");
//end
self.displayLink.paused = YES;
if (self.delegate && [self.delegate respondsToSelector:@selector(endProgress)]) {
[self.delegate endProgress];
}
[self resetCaptureButton];
}
}
- (void)changeRadius {
CGFloat toValue = endRadius - lineWidth/2;
CGFloat fromValue = startRadius - lineWidth/2;
CGFloat duration = 0.2;
CGFloat times = 60 * duration;
CGFloat delta = (toValue - fromValue) / times;
_currentRecordTime += 1.f/60;
_currentRadius += delta;
if (_currentRadius <= toValue) {
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:self.centerPoint radius: _currentRadius startAngle:0 endAngle:M_PI * 2 clockwise:YES];
_circleLayer.path = path.CGPath;
_circleLayer.lineWidth = lineWidth;
UIBezierPath *maskPath = [UIBezierPath bezierPathWithArcCenter:self.centerPoint radius:_currentRadius + 2 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
_maskLayer = [CAShapeLayer layer];
_maskLayer.path = maskPath.CGPath;
[self.layer setMask:_maskLayer];
} else {
CGFloat delta = 1 / (maxRecordTime * 60);
self.drawLayer.strokeEnd += delta;
if (self.drawLayer.strokeEnd >= 1) {
self.displayLink.paused = YES;
if (self.delegate && [self.delegate respondsToSelector:@selector(endProgress)]) {
[self.delegate endProgress];
}
}
}
}
최후
데모 링크를 첨부하면 데모는 상술한 효과를 실현했지만 복용성이 비교적 높은 컨트롤러로 봉인되지 않았고 주로 실현 방향을 제공하는 것을 위주로 한다.어떤 의문이 있으면 지적해 주십시오
보완 업데이트: 2019/02/17
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.