iOS 애니메이션 해석 의 알 리 페 이 결제 후크 애니메이션 의 실현 방법

머리말
우 리 는 평소에 알 리 페 이 로 지불 할 때 결제 중의 애니메이션 과 결제 가 완 성 된 애니메이션 이 있 습 니 다.이 블 로 그 는 주로 이런 애니메이션 효 과 를 분석 하 는데 효 과 는 다음 과 같다.

알 리 페 이 결제 애니메이션
애니메이션
관찰 하기 편리 하도록 애니메이션 의 속 도 를 늦 추고 보조 선 을 추가 합 니 다.

느 린 애니메이션
그림 에서 볼 수 있 듯 이 원호 운동 의 궤적 은 전반 부 와 후반 부 로 나 눌 수 있다.또한 원호 의 시작 각도(StartAngle)와 끝 각도(EndAngle)는 규칙 적 인 변 화 를 하고 있다.
전반:-0.5 pi 에서 pi 까지 이 운동 은 속도 가 비교적 빠르다.StartAngle 은 변 하지 않 고-0.5 pi 가 되 지 않 습 니 다.EndAngle 은 pi 까지 등 속 으로 올 라 갑 니 다.전반 부 에 원호 가 계속 길 어 지면 서 마지막 에 3/4 의 원 을 형성한다.
후반 부:pi 에서 1.5 pi 까지 이 운동 속 도 는 비교적 느리다.StartAngle 은-0.5 pi 에서 1.5 pi 로 변화 하기 시작 했다.EndAngle 은 pi 에서 1.5 pi 로 변화 하고 마지막 으로 StartAngle 과 EndAngle 은 1.5 pi 에 겹 친다.후반 부 에는 원호 가 길 어 져 사라 질 때 까지 계속 길 어 졌 다.
구현 코드
1.전역 속성 초기 화

{
 //    
 CADisplayLink *_link;
 //    
 CAShapeLayer *_animationLayer;
 //    
 CGFloat _startAngle;
 //    
 CGFloat _endAngle;
 //      
 CGFloat _progress;
}

2.인터페이스 리 셋 작업 은 CAdisplayLink 로 완료

 _link = [CADisplayLink displayLinkWithTarget:self selector:@selector(displayLinkAction)];
 [_link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
 _link.paused = true;

전반 과 후반 의 속도 차 이 를 실현 하기 위해 속도 방법 을 정의 했다.

-(CGFloat)speed{
 if (_endAngle > M_PI) {
  return 0.1/60.0f;
 }
 return 0.8/60.0f;
}

CAdisplayLink 를 통 해 진 도 를 갱신 하고 진도 증가 속 도 는 speed 로 결정 합 니 다.

-(void)displayLinkAction{
 _progress += [self speed];
 if (_progress >= 1) {
  _progress = 0;
 }
 [self updateAnimationLayer];
}

베 어 셀 곡선 을 새로 고 치 는 StartAngle 과 EndAngle 이 곡선 을 이 루 는 운동:

-(void)updateAnimationLayer{

 _startAngle = -M_PI_2;
 _endAngle = -M_PI_2 +_progress * M_PI * 2;

 if (_endAngle > M_PI) {
  CGFloat progress1 = 1 - (1 - _progress)/0.25;
  _startAngle = -M_PI_2 + progress1 * M_PI * 2;
 }
 CGFloat radius = _animationLayer.bounds.size.width/2.0f - lineWidth/2.0f;
 CGFloat centerX = _animationLayer.bounds.size.width/2.0f;
 CGFloat centerY = _animationLayer.bounds.size.height/2.0f;
 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(centerX, centerY) radius:radius startAngle:_startAngle endAngle:_endAngle clockwise:true];
 path.lineCapStyle = kCGLineCapRound;

 _animationLayer.path = path.CGPath;
}

결제 완료 애니메이션 분석
관찰 하기 편리 하도록 애니메이션 의 속 도 를 늦 추고 보조 선 을 추가 합 니 다.

원리 분석
위의 그림 을 통 해 알 수 있 듯 이 결제 완 료 된 애니메이션 은 두 부분 으로 구성 된다.
3.코드 구현
1.라운드 애니메이션
이 애니메이션 은 비교적 간단 해서 베 세 르 곡선 을 이용 하여 호 를 그 리 는 기능 이다.CAShape Layer 의 strokeEnd 속성 과 핵심 애니메이션 을 이용 하여 이 루어 진 라운드 애니메이션 입 니 다.

-(void)circleAnimation{

 //    
 CAShapeLayer *circleLayer = [CAShapeLayer layer];
 circleLayer.frame = _animationLayer.bounds;
 [_animationLayer addSublayer:circleLayer];
 circleLayer.fillColor = [[UIColor clearColor] CGColor];
 circleLayer.strokeColor = BlueColor.CGColor;
 circleLayer.lineWidth = lineWidth;
 circleLayer.lineCap = kCALineCapRound;

 //    
 CGFloat lineWidth = 5.0f;
 CGFloat radius = _animationLayer.bounds.size.width/2.0f - lineWidth/2.0f;
 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:circleLayer.position radius:radius startAngle:-M_PI/2 endAngle:M_PI*3/2 clockwise:true];
 circleLayer.path = path.CGPath;

 //    
 CABasicAnimation *checkAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
 checkAnimation.duration = circleDuriation;
 checkAnimation.fromValue = @(0.0f);
 checkAnimation.toValue = @(1.0f);
 checkAnimation.delegate = self;
 [checkAnimation setValue:@"checkAnimation" forKey:@"animationName"];
 [circleLayer addAnimation:checkAnimation forKey:nil];
}

2.코드 애니메이션
맞 춤 형 애니메이션 은 베 어 셀 곡선의 선 을 그 리 는 특성 을 이용 하여 두 단락 의 곡선 을 맞 춤 형 으로 설정 했다.위의 그림 에서 보 듯 이 대 호 는 선분 AB 와 선분 BC 를 연결 한 다음 에 핵심 애니메이션 과 CAShape Layer 의 strokeEnd 속성 을 이용 하여 대호 애니메이션 을 실현 합 니 다.

-(void)checkAnimation{

 //      
 CGFloat a = _animationLayer.bounds.size.width;
 //      A、B、C
 UIBezierPath *path = [UIBezierPath bezierPath];
 [path moveToPoint:CGPointMake(a*2.7/10,a*5.4/10)];
 [path addLineToPoint:CGPointMake(a*4.5/10,a*7/10)];
 [path addLineToPoint:CGPointMake(a*7.8/10,a*3.8/10)];

 //    
 CAShapeLayer *checkLayer = [CAShapeLayer layer];
 checkLayer.path = path.CGPath;
 checkLayer.fillColor = [UIColor clearColor].CGColor;
 checkLayer.strokeColor = BlueColor.CGColor;
 checkLayer.lineWidth = lineWidth;
 checkLayer.lineCap = kCALineCapRound;
 checkLayer.lineJoin = kCALineJoinRound;
 [_animationLayer addSublayer:checkLayer];

 //    
 CABasicAnimation *checkAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
 checkAnimation.duration = checkDuration;
 checkAnimation.fromValue = @(0.0f);
 checkAnimation.toValue = @(1.0f);
 checkAnimation.delegate = self;
 [checkAnimation setValue:@"checkAnimation" forKey:@"animationName"];
 [checkLayer addAnimation:checkAnimation forKey:nil];
}

원본 다운로드:
Github 주소
로 컬 다운로드
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.