Android谷歌地圖標記周圍的脈衝環動畫

Question

我想在Android谷歌地圖片段（如Uber）的藍色圓點當前用戶位置添加脈衝環動畫。

任何人都可以幫助我解決這個問題嗎？

Answer 1

我發現了一個解決方案，可以將脈動動畫添加到標記中。 這是地圖部分，這裏變量「地圖」表示您的地圖。

private Circle lastUserCircle; 
private long pulseDuration = 1000; 
private ValueAnimator lastPulseAnimator; 

private void addPulsatingEffect(Latlng userLatlng){ 
      if(lastPulseAnimator != null){ 
       lastPulseAnimator.cancel(); 
       Log.d("onLocationUpdated: ","cancelled"); 
      } 
      if(lastUserCircle != null) 
       lastUserCircle.setCenter(userLatlng); 
      lastPulseAnimator = valueAnimate(userLocation.getAccuracy(), pulseDuration, new ValueAnimator.AnimatorUpdateListener() { 
       @Override 
       public void onAnimationUpdate(ValueAnimator animation) { 
        if(lastUserCircle != null) 
         lastUserCircle.setRadius((Float) animation.getAnimatedValue()); 
        else { 
         lastUserCircle = map.addCircle(new CircleOptions() 
           .center(userLatlng) 
           .radius((Float) animation.getAnimatedValue()) 
           .strokeColor(Color.RED) 
           .fillColor(Color.BLUE)); 
        } 
       } 
      }); 

} 
protected ValueAnimator valueAnimate(float accuracy,long duration, ValueAnimator.AnimatorUpdateListener updateListener){ 
     Log.d("valueAnimate: ", "called"); 
     ValueAnimator va = ValueAnimator.ofFloat(0,accuracy); 
     va.setDuration(duration); 
     va.addUpdateListener(updateListener); 
     va.setRepeatCount(ValueAnimator.INFINITE); 
     va.setRepeatMode(ValueAnimator.RESTART); 

     va.start(); 
     return va; 
    } 

您必須通過添加PositionChangedListener來調用位置更新。您可以在Google地圖文檔中輕鬆找到該文件。之後，每次更新調用上述方法。

固定脈衝半徑有所值相同，因此，它是既不能太大，也不能太小

寫這個方法

protected float getDisplayPulseRadius(float radius) { 
     float diff = (map.getMaxZoomLevel() - map.getCameraPosition().zoom); 
     if (diff < 3) 
      return radius; 
     if (diff < 3.7) 
      return radius * (diff/2); 
     if (diff < 4.5) 
      return (radius * diff); 
     if (diff < 5.5) 
      return (radius * diff) * 1.5f; 
     if (diff < 7) 
      return (radius * diff) * 2f; 
     if (diff < 7.8) 
      return (radius * diff) * 3.5f; 
     if (diff < 8.5) 
      return (float) (radius * diff) * 5; 
     if (diff < 10) 
      return (radius * diff) * 10f; 
     if (diff < 12) 
      return (radius * diff) * 18f; 
     if (diff < 13) 
      return (radius * diff) * 28f; 
     if (diff < 16) 
      return (radius * diff) * 40f; 
     if (diff < 18) 
      return (radius * diff) * 60; 
     return (radius * diff) * 80; 
    } 

而改變這一行

userLocation.getAccuracy() 

到

getDisplayPulseRadius(userLocation.getAccuracy() 

而且還

.radius((Float) animation.getAnimatedValue()) 

到

.radius(getDisplayPulseRadius((Float) animation.getAnimatedValue())) 

如果你想喜歡的顏色效果漸變爲透明的，當它變得很大，你可以在你設置下一行使用此動畫師內半徑

circle.setFillColor(adjustAlpha(pulseAroundMeFillColor, 1 - animation.getAnimatedFraction())); 

private int adjustAlpha(int color, float factor) { 
     int alpha = Math.round(Color.alpha(color) * factor); 
     int red = Color.red(color); 
     int green = Color.green(color); 
     int blue = Color.blue(color); 
     return Color.argb(alpha, red, green, blue); 
    } 

Answer 2

import android.animation.ValueAnimator 
import android.graphics.Color 
import android.os.Bundle 
import android.support.v7.app.AppCompatActivity 
import com.google.android.gms.maps.CameraUpdateFactory 
import com.google.android.gms.maps.GoogleMap 
import com.google.android.gms.maps.MapFragment 
import com.google.android.gms.maps.model.Circle 
import com.google.android.gms.maps.model.CircleOptions 
import com.google.android.gms.maps.model.LatLng 
import com.google.android.gms.maps.model.MarkerOptions 

class MainActivity : AppCompatActivity() { 

    private val pulseCount = 4 

    private val animationDuration = (pulseCount + 1) * 1000 

    private val SAN_FRANCISCO_LOCATION = LatLng(37.7749295, -122.4194155) 

    private var gMap: GoogleMap? = null 

    private var circles = Array<Circle?>(pulseCount, { null }) 

    override fun onCreate(savedInstanceState: Bundle?) { 
      super.onCreate(savedInstanceState) 
      setContentView(R.layout.activity_main) 

      (fragmentManager.findFragmentById(R.id.mpFrgmnt) as MapFragment).getMapAsync { map -> 
       gMap = map 
       setCurrentLocation() 
      } 
    } 

    private fun setCurrentLocation() { 
      gMap?.let { gMap -> 
    gMap.moveCamera(CameraUpdateFactory.newLatLngZoom(SAN_FRANCISCO_LOCATION, 17f)) 
     gMap.animateCamera(CameraUpdateFactory.zoomIn()) 
     gMap.animateCamera(CameraUpdateFactory.zoomTo(17f), animationDuration, null) 
     gMap.addMarker(MarkerOptions().position(SAN_FRANCISCO_LOCATION).title("San Francisco !")) 

      val from = 0 
      val to = 100 
      val fraction = 255/to 

      for (i in 0 until pulseCount) { 
        addPulseAnimator(gMap, circles, SAN_FRANCISCO_LOCATION, from, to, fraction, i) 
      } 
     } 
    } 

    private fun addPulseAnimator(gMap: GoogleMap, circles: Array<Circle?>, latLng: LatLng, from: Int, to: Int, colorFraction: Int, currentPosition: Int) { 
      val valueAnimator = ValueAnimator.ofInt(from, to) 
      valueAnimator.duration = animationDuration.toLong() 
      valueAnimator.repeatCount = ValueAnimator.INFINITE 
      valueAnimator.repeatMode = ValueAnimator.RESTART 
      valueAnimator.startDelay = currentPosition * 1000L 
      valueAnimator.addUpdateListener { valueAnimator -> 

     val radius = valueAnimator.animatedValue as Int 

     circles[currentPosition]?.let { circle -> 
      circle.center = latLng 
      circle.radius = radius.toDouble() 
      circle.fillColor = Color.argb((to - radius) * colorFraction, 48, 118, 254) 
      circle.strokeWidth = 0f 

     } ?: run { 
      circles[currentPosition] = gMap.addCircle(CircleOptions() 
        .center(latLng) 
        .radius(radius.toDouble()) 
        .fillColor(Color.argb((to - radius) * colorFraction, 48, 118, 254)) 
        .strokeWidth(0f)) 
        } 
      } 
      valueAnimator.start() 
     } 
}