圍繞Google地圖標記的脈衝環動畫iOS

Question

我想添加一個標記周圍的脈衝環動畫作爲iOS谷歌地圖中的當前用戶位置（如Uber）。我試圖通過addAnimation向標記層添加CABasicAnimation。它不工作。

另外我嘗試動畫標記的比例，但規模變化沒有發生。有人能幫助我解決這個問題嗎？

Answer 1

不知何故它現在工作。我創建了一個自定義視圖並將該視圖設置爲GMSMarkericonView。之後，添加到視圖層的動畫。

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(200, 200, 100, 100)]; 
view.backgroundColor = [UIColor redColor]; 
view.layer.cornerRadius = 50; 

GMSMarker *m = [GMSMarker markerWithPosition:mapView_.myLocation.coordinate]; 
m.iconView = view; 
m.map = mapView_; 


CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; 
scaleAnimation.duration = 1.5; 
scaleAnimation.repeatCount = HUGE_VAL; 
scaleAnimation.autoreverses = YES; 
scaleAnimation.fromValue = [NSNumber numberWithFloat:0.1]; 
scaleAnimation.toValue = [NSNumber numberWithFloat:1.2]; 

[view.layer addAnimation:scaleAnimation forKey:@"scale"]; 

的另一種方法：

---

GMSMarker *m = [GMSMarker markerWithPosition:mapView_.myLocation.coordinate]; 

//custom marker image 
    UIImageView *pulseRingImg = [[UIImageView alloc] initWithFrame: CGRectMake(-30, -30, 78, 78)]; 
    pulseRingImg.image = [UIImage imageNamed:@"Pulse"]; 
    pulseRingImg.userInteractionEnabled = NO; 


    //transform scale animation 
    CABasicAnimation *theAnimation; 
    theAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.xy"]; 
    theAnimation.duration = 3.5; 
    theAnimation.repeatCount = HUGE_VALF; 
    theAnimation.autoreverses = NO; 
    theAnimation.fromValue = [NSNumber numberWithFloat:0.0]; 
    theAnimation.toValue = [NSNumber numberWithFloat:2.0]; 

//alpha Animation for the image 
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"]; 
    animation.duration = 3.5; 
    animation.repeatCount = HUGE_VALF; 
    animation.values = [NSArray arrayWithObjects: 
         [NSNumber numberWithFloat:1.0], 
         [NSNumber numberWithFloat:0.5], 
         [NSNumber numberWithFloat:0.0], nil]; 
    animation.keyTimes = [NSArray arrayWithObjects: 
         [NSNumber numberWithFloat:0.0], 
         [NSNumber numberWithFloat:1.2], 
         [NSNumber numberWithFloat:3.5], nil]; 
    [pulseRingImg.layer addAnimation:animation forKey:@"opacity"]; 


    [pulseRingImg.layer addAnimation:theAnimation forKey:@"pulse"]; 
    pulseRingImg.userInteractionEnabled = NO; 

    m.iconView = pulseRingImg; 
    [m.layer addSublayer:pulseRingImg.layer]; 
    m.map = mapView_; 
    m.groundAnchor = CGPointMake(0.5, 0.5); 

另一種：

m = [GMSMarker markerWithPosition:mapView_.myLocation.coordinate]; 

    //custom marker image 
    UIImageView *pulseRingImg = [[UIImageView alloc] initWithFrame: CGRectMake(-30, -30, 78, 78)]; 
    pulseRingImg.image = [UIImage imageNamed:@"Pulse"]; 
    pulseRingImg.userInteractionEnabled = NO; 

    [CATransaction begin]; 
    [CATransaction setAnimationDuration:3.5]; 

    //transform scale animation 
    CABasicAnimation *theAnimation; 
    theAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.xy"]; 
    theAnimation.repeatCount = HUGE_VALF; 
    theAnimation.autoreverses = NO; 
    theAnimation.fromValue = [NSNumber numberWithFloat:0.0]; 
    theAnimation.toValue = [NSNumber numberWithFloat:2.0]; 

    [pulseRingImg.layer addAnimation:theAnimation forKey:@"pulse"]; 
    pulseRingImg.userInteractionEnabled = NO; 

    [CATransaction setCompletionBlock:^{ 
     //alpha Animation for the image 
     CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"]; 
     animation.duration = 3.8; 
     animation.repeatCount = HUGE_VALF; 
     animation.values = [NSArray arrayWithObjects: 
          [NSNumber numberWithFloat:1.0], 
          [NSNumber numberWithFloat:0.0], nil]; 
     [m.iconView.layer addAnimation:animation forKey:@"opacity"]; 
    }]; 

    [CATransaction commit]; 

    m.iconView = pulseRingImg; 
    [m.layer addSublayer:pulseRingImg.layer]; 
    m.map = mapView_; 
    m.groundAnchor = CGPointMake(0.5, 0.5); 

夫特3.0代碼如下 注：根據您的需要更改時間

  let m = GMSMarker(position: camera.target) 

      //custom marker image 
      let pulseRingImg = UIImageView(frame: CGRect(x: -30, y: -30, width: 78, height: 78)) 
      pulseRingImg.image = UIImage(named: "Pulse") 
      pulseRingImg.isUserInteractionEnabled = false 
      CATransaction.begin() 
      CATransaction.setAnimationDuration(3.5) 

      //transform scale animation 
      var theAnimation: CABasicAnimation? 
      theAnimation = CABasicAnimation(keyPath: "transform.scale.xy") 
      theAnimation?.repeatCount = Float.infinity 
      theAnimation?.autoreverses = false 
      theAnimation?.fromValue = Float(0.0) 
      theAnimation?.toValue = Float(2.0) 
      theAnimation?.isRemovedOnCompletion = false 

      pulseRingImg.layer.add(theAnimation!, forKey: "pulse") 
      pulseRingImg.isUserInteractionEnabled = false 
      CATransaction.setCompletionBlock({() -> Void in 

       //alpha Animation for the image 
       let animation = CAKeyframeAnimation(keyPath: "opacity") 
       animation.duration = 3.5 
       animation.repeatCount = Float.infinity 
       animation.values = [Float(2.0), Float(0.0)] 
       m.iconView?.layer.add(animation, forKey: "opacity") 
      }) 

      CATransaction.commit() 
      m.iconView = pulseRingImg 
      m.layer.addSublayer(pulseRingImg.layer) 
      m.map = gmapView 
      m.groundAnchor = CGPoint(x: 0.5, y: 0.5) 

脈衝圖片：