iOS 애니메이션 해석 의 둥 근 공 로드 애니메이션 XLballLoading 의 실현

머리말
웹 페이지 의 크기 가 크 면 사용자 가 불 러 오 는 데 시간 이 오래 걸 릴 수 있 습 니 다.이런 상황 에서 저 희 는 보통(불 러 오기)loading 애니메이션 을 사용 하여 사용자 페이지 가 불 러 오 는 것 을 알려 드 립 니 다.본 고 는 iOS 원구 로 애니메이션 XLballLoading 의 실제 상황 에 관 한 내용 을 상세 하 게 소개 하고 여러분 들 이 참고 하여 공부 할 수 있 도록 공유 할 것 입 니 다.다음은 더 이상 말 하지 않 겠 습 니 다.자,상세 한 소 개 를 좀 봅 시다.
효과

원리 분석
1.애니메이션 해체
효과 도 를 보면 애니메이션 은 두 부분 으로 나 눌 수 있다.확대 애니메이션,변위 애니메이션 이다.
확대 애니메이션 은 비교적 간단 하 다.여 기 는 주로 변위 애니메이션 을 분석 해 보 자.
(1)크기 조정 효과 제거:

차폐 증폭 효과
(2)그 중의 둥 근 공 하 나 를 제거한다

지금 은 그 중의 한 공이 다른 공 을 감 고 원호 운동 을 하 게 하 는 것 이 주요 원 리 를 알 수 있다.하나의 원구 의 운동 궤적 을 확정 하면 다른 원구 와 그의 왼쪽 이 상대 적 으로 운동 하면 된다.다음은 이 원호 운동 의 원 리 를 중점적으로 이야기 합 시다.
2.원호 운동
편리 하 게 관찰 하기 위해 서 우 리 는 먼저 이 애니메이션 을 늦 춘 다음 에 보조 선 을 추가 합 니 다.

둔화 효과 도
그림 에서 알 수 있 듯 이 파란색 공 은 주로 세 단락 의 궤적 을 거 쳤 다.
1 단:왼쪽 가장자리 에서 시계 반대 방향 으로 180°에서 회색 공의 오른쪽 까지4.567917.2 단:회색 공 오른쪽 에 회색 공 을 붙 이 고 시계 반대 방향 으로 180°에서 왼쪽 까지3 단:회색 공 왼쪽 에서 시작 위치 로 되 돌아 갑 니 다운동 궤적 을 분석 한 이상 아래 에서 실현 하기 가 편리 하 다.
1 단:파란색 공 은 A 를 기점 으로 원심 O 를 따라 시계 반대 방향 으로 B 점 까지 운동 한다.

두 번 째 단계:파란색 공 은 B 를 기점 으로 원심 P 를 C 시 까지 돈다.

세 번 째 단계:C 시 에서 원점 으로 돌아 가기

3.실현 코드
1.첫 번 째 운동:
시작 점,원심,반지름 을 확정 하여 파란색 작은 공 을 큰 원 으로 감아 라.

 //       
 CGFloat width = _ballContainer.bounds.size.width;
 //    
 CGFloat r = (_ball1.bounds.size.width)*ballScale/2.0f;
 //    
 CGFloat R = (width/2 + r)/2.0;
 UIBezierPath *path1 = [UIBezierPath bezierPath];
 //      
 [path1 moveToPoint:_ball1.center];
 //   （        ）
 [path1 addArcWithCenter:CGPointMake(R + r, width/2) radius:R startAngle:M_PI endAngle:M_PI*2 clockwise:NO];

2.2 단 운동
회색 작은 공의 중심 을 원심 으로 하고 지름 을 반경 으로 작은 원 을 감 으 며 두 단락 의 곡선 을 연결한다

//   
 UIBezierPath *path1_1 = [UIBezierPath bezierPath];
 //                     
 [path1_1 addArcWithCenter:CGPointMake(width/2, width/2) radius:r*2 startAngle:M_PI*2 endAngle:M_PI clockwise:NO];
 [path1 appendPath:path1_1];

3.3 단 운동

//    
 [path1 addLineToPoint:_ball1.center];

4.변위 애니메이션
키 프레임 애니메이션 을 이용 하여 작은 공 라인 에 설 치 된 베 어 셀 곡선 이동 을 실현 합 니 다.

 //    
 CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
 animation1.path = path1.CGPath;
 animation1.removedOnCompletion = YES;
 animation1.duration = [self animationDuration];
 animation1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
 [_ball1.layer addAnimation:animation1 forKey:@"animation1"];

5.애니메이션 크기 조정
이동 애니메이션 이 시 작 될 때마다 크기 조정 애니메이션 을 실행 합 니 다.

-(void)animationDidStart:(CAAnimation *)anim{

 CGFloat delay = 0.3f;
 CGFloat duration = [self animationDuration]/2 - delay;

 [UIView animateWithDuration:duration delay:delay options:UIViewAnimationOptionCurveEaseOut| UIViewAnimationOptionBeginFromCurrentState animations:^{
  _ball1.transform = CGAffineTransformMakeScale(ballScale, ballScale);
  _ball2.transform = CGAffineTransformMakeScale(ballScale, ballScale);
  _ball3.transform = CGAffineTransformMakeScale(ballScale, ballScale);
 } completion:^(BOOL finished) {
  [UIView animateWithDuration:duration delay:delay options:UIViewAnimationOptionCurveEaseInOut| UIViewAnimationOptionBeginFromCurrentState animations:^{
   _ball1.transform = CGAffineTransformIdentity;
   _ball2.transform = CGAffineTransformIdentity;
   _ball3.transform = CGAffineTransformIdentity;
  } completion:nil];
 }];
}

6.애니메이션 순환
애니메이션 이 끝 날 때마다 애니메이션 을 새로 실행 합 니 다.

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
 if (_stopAnimationByUser) {return;}
 [self startPathAnimate];
}

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