如何在Android上的谷歌地图上显示涟漪动画？

Question

我想在指定的 google map 上设置涟漪动画，请参考这里，这个链接非常详细地描述了我的需求。我已经参考了上述链接，但是无法在 google map 上设置动画。

到目前为止，我尝试过的方法是:

我的XML代码:

<com.test.custom.RippleBackground
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/rippleLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"
        app:rb_color="#0099CC"
        app:rb_duration="5000"        
        app:rb_radius="32dp"
        app:rb_rippleAmount="4"
        app:rb_scale="6" >

        <ImageView
            android:id="@+id/imgMapProfile"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_centerInParent="true"
            android:src="@drawable/ic_profile_active" />
    </com.test.custom.RippleBackground>

我编写的Java代码用于在谷歌地图上生成涟漪效果：

 LatLng currentAddressLatLong;              
                        currentAddressLatLong = new LatLng(gps.getLatitude(), gps.getLongitude());

                    RippleBackground rippleLayout=(RippleBackground)findViewById(R.id.rippleLayout);
                    rippleLayout.setVisibility(View.VISIBLE);
                    ImageView imgMapProfile=(ImageView)findViewById(R.id.imgMapProfile);

                    Bitmap markerUserBitmap = Comman.createDrawableFromView(NearByActivity.this, rippleLayout);
                    googleMap.addMarker(new MarkerOptions().position(currentAddressLatLong).icon(BitmapDescriptorFactory.fromBitmap(markerUserBitmap)));
                    googleMap.moveCamera(CameraUpdateFactory.newLatLng(currentAddressLatLong));
                    googleMap.animateCamera(CameraUpdateFactory.zoomTo(11));

                    rippleLayout.startRippleAnimation();

     // Convert a view to bitmap function
            public static Bitmap createDrawableFromView(Context context, View view) 
            {
                DisplayMetrics displayMetrics = new DisplayMetrics();
                ((Activity)context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
                view.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
                view.measure(displayMetrics.widthPixels, displayMetrics.heightPixels);
                view.layout(0, 0, displayMetrics.widthPixels, displayMetrics.heightPixels);
                view.buildDrawingCache();
                Bitmap bitmap = Bitmap.createBitmap(view.getMeasuredWidth(), view.getMeasuredHeight(), Bitmap.Config.ARGB_8888);

                Canvas canvas = new Canvas(bitmap);
                view.draw(canvas);

                return bitmap;
            }

但是位图没有得到动画。请帮忙。非常感谢。

- Leo Wiki

---

我认为布局应该覆盖在Google地图上，而我发现这个库使用了扩展RelativeLayout，它至少应该使用FrameLayout来进行覆盖。 - bjiang

Answer 1

对于想要在 Google 地图中创建如下涟漪背景的所有人，可以按照以下步骤进行：

1. 创建 3 个相同圆形的 GroundOverlay。将图像放入 drawable 文件夹中。
2. 创建 Value Animator。
3. 定期将 3 个 GroundOverlay 通过 ValueAnimator 发送。 以下是代码： 在 onCreateView 中执行

 new Handler().postDelayed(new Runnable() {
                   @Override public void run() {final GroundOverlay groundOverlay11=googleMap.addGroundOverlay(new
        GroundOverlayOptions()
                           .position(latLng, 2000)
                           .transparency(0.5f)
                           .image(BitmapDescriptorFactory.fromResource(R.drawable.krug)));
                    OverLay(groundOverlay11);
                   }
                  }, 0);

    new Handler().postDelayed(new Runnable() {
       @Override
       public void run() {
        final GroundOverlay groundOverlay1=googleMap.addGroundOverlay(new GroundOverlayOptions()
                .position(latLng, 2000)
                .transparency(0.5f)
                .image(BitmapDescriptorFactory.fromResource(R.drawable.krug)));
        OverLay(groundOverlay1);
       }
      }, 4000);

    new Handler().postDelayed(new Runnable() {
       @Override
       public void run() {
        final GroundOverlay groundOverlay2=googleMap.addGroundOverlay(new GroundOverlayOptions()
                .position(latLng, 2000)
                .transparency(0.5f)
                .image(BitmapDescriptorFactory.fromResource(R.drawable.krug)));
        OverLay(groundOverlay2);
       }
      }, 8000);

以及覆盖层类：

public void OverLay(final GroundOverlay groundOverlay){
  vAnimator = ValueAnimator.ofInt(0, 2000);
  int r=99999;
  vAnimator.setRepeatCount(r);
  //vAnimator.setIntValues(0, 500);
  vAnimator.setDuration(12000);
  vAnimator.setEvaluator(new IntEvaluator());
  vAnimator.setInterpolator(new LinearInterpolator());
  vAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
   @Override
   public void onAnimationUpdate(ValueAnimator valueAnimator) {
    float animatedFraction = valueAnimator.getAnimatedFraction();
    Integer i = (Integer) valueAnimator.getAnimatedValue();
    groundOverlay.setDimensions(i);
   }
  });
  vAnimator.start();
 }

- Yeldos

---

有没有办法让脉冲动画与地图的缩放级别无关？如果我放大地图，动画也会跟着放大。 - user2234

解码图像失败。提供的图像必须是位图。 出现错误。 请附上 R.drawable.krug 文件。 - Jiks

Answer 2

感谢yeldos，我刚刚修改了他的代码，添加了动画结束时的淡出效果。

在覆盖函数内添加以下行：

groundOverlay.setTransparency(animatedFraction);

就在下方

groundOverlay.setDimensions(i);

- Vodet

Answer 3

有一个安卓库可以在谷歌地图上显示涟漪效果。使用这个库，只需要两行代码就可以按照你的问题在谷歌地图上显示涟漪效果。 请访问此链接以获取显示涟漪的库：https://github.com/aarsy/GoogleMapsRippleEffect

- Arsy

---

我已经尝试过这个库。对于许多设备来说，它无法正常工作并会出现“内存不足异常”。这似乎是该库的一个持续问题。 - user2924127

Answer 4

创建anim文件夹中的文件 sclae_fade.xml

<alpha
    android:duration="1000"
    android:fromAlpha="1.0"
    android:toAlpha="1.0"
    android:repeatCount="infinite"
    android:repeatMode="restart"
    />

在drawable文件夹中创建circle_pulse.xml文件。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#5532a9f3"/>
            <size
                android:width="120dp"
                android:height="120dp"/>
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <stroke android:color="@android:color/transparent"
                android:width="30dp"/>
            <solid android:color="#32a9f3"/>
            <size
                android:width="90dp"
                android:height="90dp"/>
        </shape>
    </item>
</layer-list>

现在设置动画

Animation logoMoveAnimation = AnimationUtils.loadAnimation(this, R.anim.scale_fade);
image_view.startAnimation(logoMoveAnimation);

- Mani