iphone - 사용자 위치와 같은 애니메이션 만들기 Blue marble drop

Question

MKMapView에서 파란색 대리석 드롭 사용자 위치와 같은 애니메이션을 만드는 방법을 알고 있습니까?

Answer 1

나는 애플이 효과를 달성하는 방법의 세부 사항에 확실하지 않지만,이 코어 애니메이션 및 사용자 지정 애니메이션 속성을 사용 할 수있는 좋은 기회처럼 나에게 느낀다. This post은 주제에 대한 멋진 배경을 제공합니다.

1. 대형 밝은 파란색 원은 위치 계산으로
2. 대형 밝은 파란색 원은이 상대적으로 큰 반경 사이에 진동 프레임으로 확대 : 난 당신이 다음과 같은 순서를 참조하고있는 "블루 마블 드롭"애니메이션으로 가정
3. 대형 밝은 파란색 원이 비록

약간 과정을 단순화 할 수있는 사용자의 위치에 작은 어두운 파란색 원으로 확대, 나는 그것을 시작하고 더 복잡한/세부 기능 C 수있는 좋은 장소라고 생각 상대적으로 용이하게 첨가 될 수있다. 큰 원과 작은 어두운 원 펄스가 수렴)

우리가 가장 먼저해야 할 것은 우리의 외부 대형 밝은 파란색 원 반경에 대한 사용자 정의 속성 정의의 CALayer 서브 클래스이다.

#import <QuartzCore/QuartzCore.h> 

@interface CustomLayer : CALayer 
@property (nonatomic, assign) CGFloat circleRadius; 
@end 

및 구현 : 장소에서이 인프라와

#import "CustomLayer.h" 

@implementation CustomLayer 
@dynamic circleRadius; // Linked post tells us to let CA implement our accessors for us. 
         // Whether this is necessary or not is unclear to me and one 
         // commenter on the linked post claims success only when using 
         // @synthesize for the animatable property. 

+ (BOOL)needsDisplayForKey:(NSString*)key { 
    // Let our layer know it has to redraw when circleRadius is changed 
    if ([key isEqualToString:@"circleRadius"]) { 
     return YES; 
    } else { 
     return [super needsDisplayForKey:key]; 
    } 
} 

- (void)drawInContext:(CGContextRef)ctx { 

    // This call is probably unnecessary as super's implementation does nothing 
    [super drawInContext:ctx]; 

    CGRect rect = CGContextGetClipBoundingBox(ctx); 

    // Fill the circle with a light blue 
    CGContextSetRGBFillColor(ctx, 0, 0, 255, 0.1); 
    // Stoke a dark blue border 
    CGContextSetRGBStrokeColor(ctx, 0, 0, 255, 0.5); 

    // Construct a CGMutablePath to draw the light blue circle 
    CGMutablePathRef path = CGPathCreateMutable(); 
    CGPathAddArc(path, NULL, rect.size.width/2, 
          rect.size.height/2, 
          self.circleRadius, 0, 2 * M_PI, NO); 
    // Fill the circle 
    CGContextAddPath(ctx, path); 
    CGContextFillPath(ctx); 

    // Stroke the circle's border 
    CGContextAddPath(ctx, path); 
    CGContextStrokePath(ctx); 

    // Release the path 
    CGPathRelease(path); 

    // Set a dark blue color for the small inner circle 
    CGContextSetRGBFillColor(ctx, 0, 0, 255, 1.0f); 

    // Draw the center dot 
    CGContextBeginPath (ctx); 
    CGContextAddArc(ctx, rect.size.width/2, 
         rect.size.height/2, 
         5, 0, 2 * M_PI, NO); 
    CGContextFillPath(ctx); 
    CGContextStrokePath(ctx); 

} 

@end 

, 우리는 지금 값의 보간 처리를 취할 것입니다 쉽게 B/C의 코어 애니메이션과 바깥 쪽 원의 반지름을 애니메이션뿐만 아니라 전화를 다시 그릴 수 있습니다. 우리가해야 할 일은 레이어에 애니메이션을 추가하는 것뿐입니다. 개념의 간단한 증거로, 나는 3 단계 애니메이션을 통해 이동하는 간단한 CAKeyframeAnimation를 선택 : 위의

// In some controller class... 
- (void)addLayerAndAnimate { 

    CustomLayer *customLayer = [[CustomLayer alloc] init]; 

    // Make layer big enough for the initial radius 
    // EDIT: You may want to shrink the layer when it reacehes it's final size 
    [customLayer setFrame:CGRectMake(0, 0, 205, 205)]; 
    [self.view.layer addSublayer:customLayer]; 


    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"circleRadius"]; 

    // Zoom in, oscillate a couple times, zoom in further 
    animation.values = [NSArray arrayWithObjects:[NSNumber numberWithFloat:100], 
               [NSNumber numberWithFloat:45], 
               [NSNumber numberWithFloat:50], 
               [NSNumber numberWithFloat:45], 
               [NSNumber numberWithFloat:50], 
               [NSNumber numberWithFloat:45], 
               [NSNumber numberWithFloat:20], 
                nil]; 
    // We want the radii to be 20 in the end 
    customLayer.circleRadius = 20; 

    // Rather arbitrary values. I thought the cubic pacing w/ a 2.5 second pacing 
    // looked decent enough but you'd probably want to play with them to get a more 
    // accurate imitation of the Maps app. You could also define a keyTimes array for 
    // a more discrete control of the times per step. 
    animation.duration = 2.5; 
    animation.calculationMode = kCAAnimationCubicPaced; 

    [customLayer addAnimation:animation forKey:nil]; 

} 

나는 특정 방법의 확실하지 오전 같은 개념을 오히려 "해키"증거하는 당신 이 효과를 사용하려고합니다. 예를 들어 데이터가 준비 될 때까지 원을 진동시키려는 경우 위의 내용은 항상 두 번 진동하기 때문에별로 의미가 없습니다.

일부 폐쇄 노트 ​​:

• 는 다시,이 효과에 대한 의도를 모르겠습니다. 예를 MKMapView에 추가하는 경우 위의 경우 MapKit과 통합하기 위해 일부 조정이 필요할 수 있습니다.
• 링크 된 게시물 위의 방법은 (나는 종종 그랬던 것처럼) 아이폰 OS의 코어 애니메이션 3.0 이상 및 OS X 10.6 이상 링크 된 게시물의
• 말하기의 버전이 필요합니다 제안, 많은 신용 및 it을 쓴 올레 Begemann에 감사 CoreAnimation에서 사용자 정의 속성을 설명하는 멋진 작업을 수행했습니다.

편집 : 또한, 성능상의 이유로, 당신은 아마 확실 층은 단지 그것을 할 필요가만큼 큰 수 있도록 할 것입니다.즉, 큰 크기에서 애니메이션을 완성한 후에는 크기를 축소하여 필요한만큼의 공간 만 사용하거나 그리기를 원할 수 있습니다. 이 작업을 수행하는 좋은 방법은 (circleRadius과는 대조적으로) bounds을 애니메이션하는 방법을 찾고 크기 보간을 기반으로이 애니메이션을 수행하는 것입니다.하지만 구현에 문제가 있습니다 (아마도 누군가 그 주제에 대한 통찰력을 더할 수 있습니다) . 이 도움이

희망, 샘

Answer 2

지도 객체에이 추가 :

myMap.showsUserLocation = TRUE;