現在位置のパルス

ポワーンとパルスが中心から外側へ拡がるアニメーション。MKAnnotationViewのサブクラスとして実装されている。


よくあるUIだがライブラリでは意外に見かけなかった。地味に便利。

真ん中の●のレイヤー dotLayer とアニメーションする輪っか haloLayerの２つのレイヤーを用意。

@property (nonatomic, strong) CALayer *dotLayer;
@property (nonatomic, strong) CALayer *haloLayer;

輪っかの広がりアニメーションはこんな感じ。カスタムなKeyframeを用意し、transform.scaleとopacityを変化させてアニメーションを表現している。

- (CALayer *)haloLayer {
    if(!_haloLayer) {
        _haloLayer = [CALayer layer];
                :
        CAKeyframeAnimation *imageAnimation = [CAKeyframeAnimation animationWithKeyPath:@"contents"];
        imageAnimation.values = @[
                                  (id)[[self haloImageWithRadius:20] CGImage],
                                  (id)[[self haloImageWithRadius:35] CGImage],
                                  (id)[[self haloImageWithRadius:50] CGImage]
                                  ];
        imageAnimation.duration = self.pulseAnimationDuration;
        imageAnimation.calculationMode = kCAAnimationDiscrete;
        
        CABasicAnimation *pulseAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.xy"];
        pulseAnimation.fromValue = @0.0;
        pulseAnimation.toValue = @1.0;
                :
        
        CABasicAnimation *fadeOutAnim = [CABasicAnimation animationWithKeyPath:@"opacity"];
        fadeOutAnim.fromValue = @1.0;
        fadeOutAnim.toValue = @0.0;
                :
    

samvermette/SVPulsingAnnotationView · GitHub