移动 Mapbox 时动画符号闪烁答案

【问题标题】：Animated symbol is flickering while moving Mapbox移动 Mapbox 时动画符号闪烁
【发布时间】：2021-10-12 10:49:35
【问题描述】：

我在 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)
}

【问题讨论】：

标签： android animation navigation mapbox flicker

【解决方案1】：

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

潜在的错误似乎与this issue有关。

【讨论】：