如何在 android 上设置折线动画？

Question

如何在androidgoogle地图上绘制动画折线？我已经为动画实现了轨迹库。我想在 android.

上像 Lyft 一样创建折线

Answer 1

创建两个 latlng 数组列表，然后按给定方法创建折线

private fun createPolyLine() {

        val lineOptions = PolylineOptions()
        lineOptions.width(6f)
        lineOptions.color(ContextCompat.getColor(act!!, R.color.colorPrimary))
        lineOptions.startCap(SquareCap())
        lineOptions.endCap(SquareCap())
        lineOptions.jointType(JointType.ROUND)
        blackPolyLine = googleMap!!.addPolyline(lineOptions)

        val greyOptions = PolylineOptions()
        greyOptions.width(6f)
        greyOptions.color(Color.GRAY)
        greyOptions.startCap(SquareCap())
        greyOptions.endCap(SquareCap())
        greyOptions.jointType(JointType.ROUND)
        greyPolyLine = googleMap!!.addPolyline(greyOptions)

        animatePolyLine()
    }

之后创建这些折线的动画

private fun animatePolyLine() {
        val animator = ValueAnimator.ofInt(0, 100)
        animator.duration = 1500
        animator.interpolator = LinearInterpolator()
        animator.addUpdateListener { animator ->
            val latLngList =
                blackPolyLine!!.points
            val initialPointSize = latLngList.size
            val animatedValue = animator.animatedValue as Int
            val newPoints = animatedValue * decodedPath.size / 100
            if (initialPointSize < newPoints) {
                latLngList.addAll(decodedPath.subList(initialPointSize, newPoints))
                blackPolyLine!!.points = latLngList
            }
        }
        animator.addListener(polyLineAnimationListener)
        animator.start()
    }

private var polyLineAnimationListener: Animator.AnimatorListener =
        object : Animator.AnimatorListener {
            override fun onAnimationStart(animator: Animator) {}
            override fun onAnimationEnd(animator: Animator) {
                val blackLatLng: MutableList<LatLng> = blackPolyLine!!.points
                val greyLatLng: MutableList<LatLng> = greyPolyLine!!.points
                greyLatLng.clear()
                greyLatLng.addAll(blackLatLng)
                blackLatLng.clear()
                blackPolyLine!!.points = blackLatLng
                greyPolyLine!!.points = greyLatLng
                blackPolyLine!!.zIndex = 2f
                animator.start()
            }

            override fun onAnimationCancel(animator: Animator) {}
            override fun onAnimationRepeat(animator: Animator) {}
        }

Answer 2

 private fun plotPolyline() {

    var polyline = "encoded_pyline"
 
    var list = PolyUtil.decode(polyline)
  

    val blackOptions = PolylineOptions()
    blackOptions.startCap(RoundCap())
    blackOptions.endCap(RoundCap())
    blackOptions.width(10.0f)
    blackOptions.color(Color.BLACK)
    blackOptions.zIndex(2.0f)

    var blackPolyline = googleMap.addPolyline(blackOptions)


    val greyOptions = PolylineOptions()
    greyOptions.startCap(RoundCap())
    greyOptions.endCap(RoundCap())
    greyOptions.width(8.0f)
    greyOptions.addAll(list)
    greyOptions.color(ContextCompat.getColor(this, R.color.gray_dark))
    var greyPolyline = googleMap.addPolyline(greyOptions)

    val valueAnimator = ValueAnimator.ofInt(0, 100)
    valueAnimator.duration = 1500
    valueAnimator.interpolator = LinearInterpolator()
    valueAnimator.addUpdateListener {
        val points: List<LatLng> = greyPolyline.getPoints()
        val percentValue = valueAnimator.animatedValue as Int
        val size = points.size
        val newPoints = (size * (percentValue / 100.0f)).toInt()
       
        val p = points.subList(0, newPoints)
        blackPolyline.points = p


    }

    valueAnimator.addListener(object: Animator.AnimatorListener{
        override fun onAnimationStart(animation: Animator?) {

        }

        override fun onAnimationEnd(animation: Animator?) {
            animation?.start()
        }

        override fun onAnimationCancel(animation: Animator?) {
        }

        override fun onAnimationRepeat(animation: Animator?) {
        }
    })

    googleMap.animateCamera(CameraUpdateFactory.newLatLngZoom(list.get(0), 15.0f))
    valueAnimator.start()
}

如何在 android 上设置折线动画？

How to animate polyline on android?

android

google-maps

google-polyline