java - 安卓和谷歌地图 : Fading pulse animation

Question

我创建了一个脉冲动画，它在 map 上占据一个位置，并持续发出一个脉冲(圆圈)。这按预期工作。但是，我希望脉冲淡出，离点越远。关于如何实现最佳效果有什么想法吗？

动画如下:

    mCircle = mMap.addCircle(
            new CircleOptions()
                    .center(mMarker.getPosition())
                    .strokeWidth(STROKE_WIDTH)
                    .strokeColor(Color.parseColor(DEFAULT_COLOR))
                    .radius(RADIUS));

    mAnimator.setRepeatCount(ValueAnimator.INFINITE);
    mAnimator.setRepeatMode(ValueAnimator.RESTART);
    mAnimator.setIntValues(0, 100);
    mAnimator.setDuration(DURATION);
    mAnimator.setEvaluator(new IntEvaluator());
    mAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
    mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            float animatedFraction = valueAnimator.getAnimatedFraction();
            mCircle.setRadius(animatedFraction * SIZE);
        }
    });
    mAnimator.start();

Answer 1

我认为提供的 Google Maps Shapes 无法满足您的需求.

我的建议是使用 Canvas 来做到这一点, Bitmap , 和 Ground Overlay .您可以在每次回调到 onAnimationUpdate() 时在 Canvas 上重新绘制一些形状，并更新地面叠加层上的图像。像这样:

初始化位图/ Canvas (这可能是类构造函数)

private void init() {
    mBitmap = Bitmap.createBitmap(MAX_ANIMATION_WIDTH, MAX_ANIMATION_HEIGHT, Bitmap.Config.ARGB_8888);
    mCanvas = new Canvas(mBitmap);
}

更新位图

private void updateCanvas() {
    // Clear the canvas for new iteration of drawing
    mCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);

    // TODO: determine/update x, y, radius, paint as a function of animation progress
    // i.e. for a fade effect, set the paint color to a diminishing alpha level
    mPaint.setColor(mPulseColor);
    mCanvas.drawCircle(x, y, radius, mPaint);
}

更新地面叠加层

private void updateOverlay() {
    mGroundOverlay.setImage(BitmapDescriptorFactory.fromBitmap(mBitmap))
}

添加地面叠加层(这是原帖中的run()方法)

private void addGroundOverlay() {
    // Add ground overlay with the bitmap's initial state
    mGroundOverlay = mMap.addGroundOverlay(new GroundOverlayOptions());

    // TODO: Set values for bitmap's initial state

    // Paint the canvas with the initial state
    updateCanvas();

    // Update the ground overlay
    updateOverlay();

    mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            // Update animation values
            mPulseColor = Color.RED; // TODO: set color/alpha

            // Paint canvas with new animation state
            updateCanvas();

            // Update overlay
            updateOverlay();
        }
    });
}