高德地图marker点标记实现上下反复跳跃弹跳

暴走的山交

已于 2022-06-22 17:56:55 修改

阅读量2.9k

点赞数

分类专栏：踩过的坑安卓开发Android 文章标签： android java vue

于 2022-06-22 17:54:32 首次发布

本文链接：https://blog.csdn.net/qq_43649223/article/details/125413923

版权

踩过的坑同时被 2 个专栏收录

82 篇文章

订阅专栏

安卓开发Android

26 篇文章

订阅专栏

这篇博客介绍了如何在安卓和Web端实现高德地图marker的上下反复弹跳动画。在安卓中，通过自定义的TranslateAnimation结合Interpolator模拟重力加速效果；在Web端，利用AMAP_ANIMATION_BOUNCE参数直接为marker设置动画效果。代码示例详细展示了实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安卓实现marker上下反复弹跳

安卓没找到可以方便实现我的需求的方法, 找到了一个自定义的方法

/**
     * 屏幕中心marker 跳动
     */
    public void startJumpAnimation(LatLng latLng, Marker locationMarker) {

        if (locationMarker != null) {
            //根据屏幕距离计算需要移动的目标点
            Point point = aMap.getProjection().toScreenLocation(latLng);
            point.y -= dip2px(getContext(), 10);
            LatLng target = aMap.getProjection()
                    .fromScreenLocation(point);
            //使用TranslateAnimation,填写一个需要移动的目标点
            Animation animation = new TranslateAnimation(target);
            animation.setInterpolator(new Interpolator() {
                @Override
                public float getInterpolation(float input) {
                    // 模拟重加速度的interpolator
                    if (input <= 0.5) {
                        return (float) (0.5f - 2 * (0.5 - input) * (0.5 - input));
                    } else {
                        return (float) (0.5f - Math.sqrt((input - 0.5f) * (1.5f - input)));
                    }
                }
            });
            //整个移动所需要的时间
            animation.setDuration(1500);
            animation.setRepeatCount(Animation.INFINITE);
            //设置动画
            locationMarker.setAnimation(animation);
            //开始动画
            locationMarker.startAnimation();

        } else {
            Log.e("ama", "screenMarker is null");
        }
    }



    //dip和px转换
    private int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

web端实现高德marker 上下反复弹跳

将这段代码写在具体的方法中,实现对应功能.
主要就是这句代码 ele就是具体的marker对象
ele.setAnimation('AMAP_ANIMATION_BOUNCE');

// 遍历所有marker将点击选择的marker添加跳动动画
        let markers = map.getAllOverlays('marker');
        markers.forEach((ele) => {
          if (ele.getExtData().deviceSerial == record.deviceSerial) {
            ele.setAnimation('AMAP_ANIMATION_BOUNCE');
          }
        });