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

高德地图marker点标记 实现上下反复跳跃弹跳这篇博客介绍了如何在安卓和 Web 端实现高德地图 marker 的上下反复弹跳动画

安卓实现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'); } }); 

marker的setAnimation()方法给marker添加动画效果
'AMAP_ANIMATION_BOUNCE' 这个参数就是实现marker上下反复弹跳效果

今天的文章 高德地图marker点标记 实现上下反复跳跃弹跳分享到此就结束了,感谢您的阅读。
编程小号
上一篇 2024-12-11 12:21
下一篇 2024-12-11 12:17

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/bian-cheng-ji-chu/83608.html