Android端Google Map v2如何实现Marker显示动画？（参考iOS）

嘿，刚好我之前研究过这个需求！Android 版的 Google Maps v2 确实没有像 iOS 那样直接内置 Marker 弹出的原生动画，但有两种靠谱的方式可以实现类似效果，下面给你详细拆解：

一、原生 API + 属性动画（推荐方案） #

这个方案完全基于官方 SDK，不需要自定义视图，性能也很稳定，核心是用 ValueAnimator 控制 Marker 的缩放、透明度和锚点，模拟从地图里"弹出来"的视觉效果。

代码示例（Kotlin） #

// 先添加目标 Marker
val targetMarker = googleMap.addMarker(
    MarkerOptions()
        .position(LatLng(39.9042, 116.4074)) // 示例坐标：北京
        .title("我的位置")
)

// 设置初始状态：缩小到极小+完全透明
targetMarker?.apply {
    setScale(0.1f)
    alpha = 0f
}

// 启动弹出动画
ValueAnimator.ofFloat(0f, 1f).apply {
    duration = 300 // 和 iOS 原生动画时长保持一致，设为300ms
    interpolator = OvershootInterpolator(1.2f) // 加个轻微回弹，更贴近iOS的弹出感
    addUpdateListener { animation ->
        val progress = animation.animatedValue as Float
        targetMarker?.apply {
            // 缩放从0.1过渡到1
            setScale(0.1f + progress * 0.9f)
            // 透明度从0过渡到1
            alpha = progress
            // 锚点上移，让Marker看起来是从地图里"钻出来"的
            setAnchor(0.5f, 1f - progress * 0.2f)
        }
    }
    start()
}

代码示例（Java） #

Marker targetMarker = googleMap.addMarker(new MarkerOptions()
        .position(new LatLng(39.9042, 116.4074))
        .title("我的位置"));

if (targetMarker != null) {
    targetMarker.setScale(0.1f);
    targetMarker.setAlpha(0f);
}

ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f);
animator.setDuration(300);
animator.setInterpolator(new OvershootInterpolator(1.2f));
animator.addUpdateListener(animation -> {
    float progress = (float) animation.getAnimatedValue();
    if (targetMarker != null) {
        targetMarker.setScale(0.1f + progress * 0.9f);
        targetMarker.setAlpha(progress);
        targetMarker.setAnchor(0.5f, 1f - progress * 0.2f);
    }
});
animator.start();

这个方案的优势是轻量、适配性好，适合大多数场景。

二、自定义 Marker 视图 + 动画（灵活扩展方案） #

如果你需要更复杂的动画效果（比如弹跳、弹性震动），可以用自定义 Marker 视图，通过控制视图的动画来实现更个性化的弹出效果。

步骤1：创建自定义 Marker 布局 #

先写一个简单的布局文件 layout_custom_marker.xml：

<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/marker_icon"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:src="@drawable/ic_custom_marker"
    android:background="@drawable/marker_round_background"/>

步骤2：给视图加动画并转换为 Marker 图标 #

// 加载自定义Marker视图
val markerView = LayoutInflater.from(context).inflate(R.layout.layout_custom_marker, null)
val markerIcon = markerView.findViewById<ImageView>(R.id.marker_icon)

// 给视图设置弹跳动画
val bounceAnim = ObjectAnimator.ofFloat(markerView, "translationY", 30f, 0f)
bounceAnim.duration = 400
bounceAnim.interpolator = BounceInterpolator()

// 先播放动画，再将视图转换为Bitmap设置给Marker
bounceAnim.addListener(object : Animator.AnimatorListener {
    override fun onAnimationEnd(animation: Animator?) {
        // 测量视图尺寸
        markerView.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED)
        markerView.layout(0, 0, markerView.measuredWidth, markerView.measuredHeight)
        // 生成Bitmap
        val bitmap = Bitmap.createBitmap(markerView.measuredWidth, markerView.measuredHeight, Bitmap.Config.ARGB_8888)
        val canvas = Canvas(bitmap)
        markerView.draw(canvas)
        // 添加Marker
        googleMap.addMarker(
            MarkerOptions()
                .position(LatLng(39.9042, 116.4074))
                .icon(BitmapDescriptorFactory.fromBitmap(bitmap))
        )
    }
    // 其他空实现方法...
    override fun onAnimationStart(animation: Animator?) {}
    override fun onAnimationCancel(animation: Animator?) {}
    override fun onAnimationRepeat(animation: Animator?) {}
})

// 启动动画
bounceAnim.start()

如果需要实时更新 Marker 图标（比如动画过程中动态刷新），可以在动画的 addUpdateListener 里重新生成 Bitmap，但这种方式对性能有一定要求，适合 Marker 数量较少的场景。

额外小技巧 #

• 如果要实现批量 Marker 依次弹出的效果，可以用 AnimatorSet 给每个动画设置延迟，营造错落有致的视觉效果。
• 插值器可以根据需求调整：AccelerateDecelerateInterpolator 是平滑过渡，OvershootInterpolator 是轻微回弹，BounceInterpolator 是弹跳效果。

内容的提问来源于stack exchange，提问作者TomJouin