时间戳

首页 > 解决方案 > 移动 Mapbox 时动画符号闪烁

android - 移动 Mapbox 时动画符号闪烁

问题描述

我在 Android 应用程序中使用 Mapbox。我正在尝试沿一条线移动图标（汽车图标）。我在运动本身上取得了成功，但图标在沿线移动时闪烁。

我在网上找了很多参考资料，发现 Mapbox SDK for Mobile 中有一个错误。但是，我认为问题在于我移动图标的速度。

我正在以2000 毫秒的持续时间为运动设置动画。

任何帮助或参考都会很好。我正在努力寻找解决方案。

这是动画运动的代码：

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
    val changeRotation = (originalRotation + 150) % 360 >= (rotation + 360) % 360 || (originalRotation + 210) % 360 <= (rotation + 360) % 360
    var nextPosition: LatLng = location

    Log.d("Utils", "original rotation: $originalRotation, rotation: $rotation")

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

    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
            nextPosition = LatLng(lat, lng)
            symbol.geometry = Point.fromLngLat(lng, lat)
            // Adding a trace to the next position.
            // This trace will be shown along the all animation, of the car icon moving.
            addTrace(originalPosition, nextPosition, points, geoJsonSource)
        }

        if (changeLocation && changeRotation) {
            val rotate = (rotation - originalRotation) * fraction + originalRotation
            symbol.iconRotate = if ((originalRotation + 360) % 360 < (rotation + 360) % 360) {
                rotation
            } else {
                rotate
            }
            Log.d("Utils", "icon rotate: ${symbol.iconRotate}")
        }

        symbolManager.update(symbol)
    }

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

标签： androidanimationnavigationmapboxflicker

解决方案

此问题的快速解决方法是允许您正在制作动画的符号的图标重叠。添加PropertyFactory.iconAllowOverlap(true)要指定相应 SymbolLayer 属性的行。

潜在的错误似乎与这个问题有关。

推荐阅读