iOS 에 서 는 UIBezierPath+CAAnimation 을 이용 하여 심장 박동 애니메이션 효 과 를 구현 합 니 다.

머리말
최근 ios 프로젝트 를 개발 하 는 여가 시간 에 UIBezierPath 를 연습 하여 그림 그리 기와 CAAnimation 애니메이션 을 사용 하기 로 결 정 했 습 니 다.심장 박동 애니메이션 을 만 들 었 습 니 다.간단 한 예 입 니 다.다음은 더 이상 말 하지 않 겠 습 니 다.상세 한 소 개 를 살 펴 보 겠 습 니 다.
GIF 예제:

핵심 코드
1.-먼저 drawRect 를 통 해 하트 뷰 를 그립 니 다.

- (void)drawRect:(CGRect)rect { 
 //   
 CGFloat padding = 4.0;
 //   (    )
 CGFloat curveRadius = (rect.size.width - 2 * padding)/4.0;
 //      
 UIBezierPath *heartPath = [UIBezierPath bezierPath];
 //   (      )
 CGPoint tipLocation = CGPointMake(rect.size.width/2, rect.size.height-padding);
 //       
 [heartPath moveToPoint:tipLocation];
 // (       )
 CGPoint topLeftCurveStart = CGPointMake(padding, rect.size.height/2.4);
 //       
 [heartPath addQuadCurveToPoint:topLeftCurveStart controlPoint:CGPointMake(topLeftCurveStart.x, topLeftCurveStart.y + curveRadius)];
 //   
 [heartPath addArcWithCenter:CGPointMake(topLeftCurveStart.x+curveRadius, topLeftCurveStart.y) radius:curveRadius startAngle:M_PI endAngle:0 clockwise:YES];
 // (       )
 CGPoint topRightCurveStart = CGPointMake(topLeftCurveStart.x + 2*curveRadius, topLeftCurveStart.y);
 //   
 [heartPath addArcWithCenter:CGPointMake(topRightCurveStart.x+curveRadius, topRightCurveStart.y) radius:curveRadius startAngle:M_PI endAngle:0 clockwise:YES];
 //       
 CGPoint topRightCurveEnd = CGPointMake(topLeftCurveStart.x + 4*curveRadius, topRightCurveStart.y);
 //       
 [heartPath addQuadCurveToPoint:tipLocation controlPoint:CGPointMake(topRightCurveEnd.x, topRightCurveEnd.y+curveRadius)];
 //      
 [[UIColor redColor] setFill];
 //   
 [heartPath fill];
 //     
 heartPath.lineWidth = 2;
 heartPath.lineCapStyle = kCGLineCapRound;
 heartPath.lineJoinStyle = kCGLineJoinRound;
 //      
 [[UIColor yellowColor] setStroke];
 [heartPath stroke];

}
2-메 인 보기에 하트 뷰 추가

 XMHeartView *heartView = [[XMHeartView alloc] init];
 heartView.frame = CGRectMake(100, 50, 200, 200);
 [self.view addSubview:heartView];
3-심장 박동 애니메이션 추가

//           
 float bigSize = 1.1;
 CABasicAnimation *pulseAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
 pulseAnimation.duration = 0.5;
 pulseAnimation.toValue = [NSNumber numberWithFloat:bigSize];
 pulseAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
 //     
 pulseAnimation.autoreverses = YES;
 //           
 pulseAnimation.repeatCount = FLT_MAX;
 //      layer
 [heartView.layer addAnimation:pulseAnimation forKey:@"transform.scale"];
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.

좋은 웹페이지 즐겨찾기