Mapbox Android端移动Animated symbol时出现闪烁问题求解决方案

问题核心原因 #

• 动画帧触发频率与Mapbox重绘逻辑冲突：当前实现每帧同时更新符号位置、旋转角度、轨迹图层三个需要重绘的属性，多重重绘请求叠加导致丢帧闪烁
• 旋转角度插值逻辑存在跳变：原有跨360度的旋转判断逻辑错误，会出现角度突变导致图标跳闪
• 轨迹更新频率过高：每帧调用addTrace更新GeoJsonSource，频繁触发图层重绘，与符号更新的重绘请求冲突
• 未开启Symbol的防隐藏配置：动画过程中可能出现图标被判定为重叠被临时隐藏，出现闪烁

优化方案 #

前置配置优化 #

在初始化SymbolManager时添加以下配置，避免图标被自动隐藏：

symbolManager.setIconAllowOverlap(true)
symbolManager.setIconIgnorePlacement(true)
symbolManager.setIconOptional(false)

代码逻辑优化 #

优化后的动画实现如下：

fun easeSymbolAndAddTrace(
    symbol: Symbol,
    symbolManager: SymbolManager,
    animators: ArrayList<ValueAnimator>,
    location: LatLng,
    rotation: Float,
    points: ArrayList<Point>,
    geoJsonSource: GeoJsonSource,
    duration: Long
) {
    val originalPosition: LatLng = symbol.latLng
    val originalRotation: Float = symbol.iconRotate
    val changeLocation = originalPosition.distanceTo(location) > 3
    // 优化旋转角度判断，计算最短旋转路径
    var adjustedRotation = rotation
    val diff = (adjustedRotation - originalRotation + 540) % 360 - 180
    adjustedRotation = originalRotation + diff
    val changeRotation = abs(diff) > 1f

    if (!changeRotation && !changeLocation) {
        return
    }

    // 预先添加轨迹，避免每帧更新重绘
    if (changeLocation) {
        addTrace(originalPosition, location, points, geoJsonSource)
        geoJsonSource.setGeoJson(LineString.fromLngLats(points))
    }

    val moveSymbol = ValueAnimator.ofFloat(0f, 1f).setDuration(duration)
    moveSymbol.interpolator = LinearInterpolator()
    moveSymbol.addUpdateListener { animation: ValueAnimator ->
        if (symbolManager.annotations.indexOfValue(symbol) < 0) {
            return@addUpdateListener
        }

        val fraction = animation.animatedValue as Float
        if (changeLocation) {
            val lat = (location.latitude - originalPosition.latitude) * fraction + originalPosition.latitude
            val lng = (location.longitude - originalPosition.longitude) * fraction + originalPosition.longitude
            symbol.geometry = Point.fromLngLat(lng, lat)
        }

        if (changeRotation) {
            // 用调整好的角度做线性插值，不会出现跳变
            symbol.iconRotate = originalRotation + diff * fraction
        }

        symbolManager.update(symbol)
    }

    moveSymbol.start()
    animators.add(moveSymbol)
}

额外优化建议 #

• 若必须实现实时增量更新轨迹，可添加帧计数，每3-5帧更新一次GeoJsonSource，降低重绘频率
• 动画过程中关闭不必要的地图交互（如缩放、拖动），避免额外重绘请求
• 2000ms的动画时长属于合理范围，不需要调整，若移动距离过长可按距离动态计算时长，保持移动速率统一，避免速率突变导致的视觉闪烁

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