Android开发——高德地图波纹扩散效果动效及自定义缩放、定位控件

引言

最近项目有在用高德地图，顺便记录下一些知识。项目需要做地图上显示一个车辆位置，这个位置需要波纹扩散效果，这个高德地图也提供了demo，但是看着效果不算很棒，比起iOS平台的要差老远了。

Android平台下载了例子瞅了一眼，原理就是AMap.addCircle(CircleOptions options)，加上圆形之后，在一定的时间范围内动态改变圆的半径，说白了也就是动画，官方demo使用Timer+TimerTask来实现的动画。因为不能满足设计师的需求，而且不带渐变色，因此我决定用属性动画做了。

动态效果图：

动态效果图

实现原理：添加了三个圆形，每个圆形一开始设置透明，每个圆形开始执行动画有个时间间隔，动态改变每个圆形半径及填充颜色的透明度即可。^_

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.amap.api.maps2d.MapView
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <LinearLayout
        android:layout_width="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="30dp"
        android:layout_marginRight="10dp"
        android:layout_alignParentRight="true"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/zoom_in"
            android:onClick="click"
            android:layout_width="30dp"
            android:src="@mipmap/zoom_in_72px_1180653_easyicon"
            android:layout_height="30dp" />
        <ImageView
            android:id="@+id/zoom_out"
            android:layout_width="30dp"
            android:onClick="click"
            android:layout_marginTop="10dp"
            android:src="@mipmap/zoom_out_72px_1180654_easyicon"
            android:layout_height="30dp" />
    </LinearLayout>
    <ImageView
        android:id="@+id/location"
        android:layout_width="30dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="10dp"
        android:onClick="click"
        android:layout_marginBottom="30dp"
        android:layout_marginTop="10dp"
        android:src="@mipmap/location_searching_72px_1182025_easyicon"
        android:layout_height="30dp" />
</RelativeLayout>

此处，设计师还说了，放大缩小及定位图标都要用他设计的，所以都是自定义一个图标。（这个例子几个图标是我自己找的，有点辣鸡）


import android.animation.AnimatorSet;
import android.animation.ValueAnimator;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.app.FragmentActivity;
import android.util.Log;
import android.view.View;
import android.view.animation.Interpolator;
import android.view.animation.LinearInterpolator;

import com.amap.api.location.AMapLocation;
import com.amap.api.location.AMapLocationClient;
import com.amap.api.location.AMapLocationClientOption;
import com.amap.api.location.AMapLocationListener;
import com.amap.api.maps2d.AMap;
import com.amap.api.maps2d.AMapOptions;
import com.amap.api.maps2d.CameraUpdate;
import com.amap.api.maps2d.CameraUpdateFactory;
import com.amap.api.maps2d.LocationSource;
import com.amap.api.maps2d.MapView;
import com.amap.api.maps2d.model.BitmapDescriptor;
import com.amap.api.maps2d.model.BitmapDescriptorFactory;
import com.amap.api.maps2d.model.Circle;
import com.amap.api.maps2d.model.CircleOptions;
import com.amap.api.maps2d.model.LatLng;
import com.amap.api.maps2d.model.Marker;
import com.amap.api.maps2d.model.MarkerOptions;
import com.amap.api.maps2d.model.MyLocationStyle;

import java.util.Timer;
import java.util.TimerTask;

public class MainActivity extends FragmentActivity implements AMap.OnMapLoadedListener, AMap.OnMapClickListener, LocationSource, AMapLocationListener {
    private AMap aMap;
    private MapView mapView;
    private AMapLocationClient mLocationClient;
    private AMapLocationClientOption mLocationOption;
    private OnLocationChangedListener mListener;

    private Marker locMarker;
    private Circle ac;
    private Circle c,d;
    private TimerTask mTimerTask;
    private Timer mTimer = new Timer();
    public static final int zoomLevel = 15 ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mapView = (MapView) findViewById(R.id.map);
        mapView.onCreate(savedInstanceState);// 此方法必须重写
        init();
    }

    private void init() {
        if (aMap == null) {
            aMap = mapView.getMap();
        }
        aMap.setOnMapLoadedListener(this);
        aMap.setOnMapClickListener(this);
        aMap.setLocationSource(this);// 设置定位监听
        aMap.getUiSettings().setZoomControlsEnabled(false);
        aMap.getUiSettings().setMyLocationButtonEnabled(false);// 设置默认定位按钮是否显示
        aMap.setMyLocationEnabled(true);// 设置为true表示显示定位层并可触发定位，false表示隐藏定位层并不可触发定位，默认是false
        // 设置定位的类型为定位模式 ，可以由定位、跟随或地图根据面向方向旋转几种
        aMap.setMyLocationStyle(new MyLocationStyle().myLocationType(MyLocationStyle.LOCATION_TYPE_LOCATE));
        aMap.getUiSettings().setLogoPosition(AMapOptions.LOGO_POSITION_BOTTOM_LEFT);
    }

    public void click(View view){
        int id =view.getId() ;
        if (id==R.id.location){
            startlocation();
        }else if (id==R.id.zoom_in){
            changeCamera(CameraUpdateFactory.zoomIn(), null);
        }else if (id==R.id.zoom_out){
            changeCamera(CameraUpdateFactory.zoomOut(), null);
        }
    }
    /**
     * 根据动画按钮状态，调用函数animateCamera或moveCamera来改变可视区域
     */
    private void changeCamera(CameraUpdate update, AMap.CancelableCallback callback) {
        aMap.animateCamera(update, 300, callback);
//        aMap.moveCamera(update); //无动画的时候调用
    }
    private Marker addMarker(LatLng point) {
        Bitmap bMap = BitmapFactory.decodeResource(this.getResources(),
                R.mipmap.icon_bus_position);
        BitmapDescriptor des = BitmapDescriptorFactory.fromBitmap(bMap);
        Marker marker = aMap.addMarker(new MarkerOptions().position(point).icon(des)
                .anchor(0.5f, 0.5f));
        return marker;
    }

    /**
     * 方法必须重写
     */
    @Override
    protected void onResume() {
        super.onResume();
        mapView.onResume();
    }

    /**
     * 方法必须重写
     */
    @Override
    protected void onPause() {
        super.onPause();
        mapView.onPause();
    }

    /**
     * 方法必须重写
     */
    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        mapView.onSaveInstanceState(outState);
    }

    /**
     * 方法必须重写
     */
    @Override
    protected void onDestroy() {
        super.onDestroy();
        mapView.onDestroy();
        if (mTimerTask != null) {
            mTimerTask.cancel();
            mTimerTask = null;
        }
        try {
            mTimer.cancel();
        } catch (Throwable e) {
            e.printStackTrace();
        }
        deactivate();
    }

    @Override
    public void onMapLoaded() {
        aMap.moveCamera(CameraUpdateFactory.zoomTo(zoomLevel));
    }

    @Override
    public void onMapClick(LatLng latLng) {

    }

    @Override
    public void activate(OnLocationChangedListener onLocationChangedListener) {
        mListener = onLocationChangedListener;
        startlocation();
    }

    @Override
    public void deactivate() {
        mListener = null;
        if (mLocationClient != null) {
            mLocationClient.stopLocation();
            mLocationClient.onDestroy();
        }
        mLocationClient = null;
    }

    /**
     * 开始定位。
     */
    private void startlocation() {

        if (mLocationClient == null) {
            mLocationClient = new AMapLocationClient(this);
            mLocationOption = new AMapLocationClientOption();
            // 设置定位监听
            mLocationClient.setLocationListener(this);
            // 设置为高精度定位模式
            mLocationOption.setLocationMode(AMapLocationClientOption.AMapLocationMode.Hight_Accuracy);
            //设置为单次定位
            mLocationOption.setOnceLocation(true);
            // 设置定位参数
            mLocationClient.setLocationOption(mLocationOption);
            mLocationClient.startLocation();
        } else {
            mLocationClient.startLocation();
        }
    }

    @Override
    public void onLocationChanged(AMapLocation aMapLocation) {
        if (mListener != null && aMapLocation != null) {
            if (mTimerTask != null) {
                mTimerTask.cancel();
                mTimerTask = null;
            }
            if (aMapLocation != null && aMapLocation.getErrorCode() == 0) {
                LatLng mylocation = new LatLng(aMapLocation.getLatitude(),
                        aMapLocation.getLongitude());
                changeCamera(CameraUpdateFactory.newLatLngZoom(mylocation,zoomLevel),null);
                if (locMarker==null){
                    addLocationMarker(mylocation);
                }else {
                    locMarker.setPosition(mylocation);
                }
                if (ac!=null){
                    ac.setCenter(mylocation);
                }
                if (c!=null){
                    c.setCenter(mylocation);
                }
                if (d!=null){
                    d.setCenter(mylocation);
                }
            } else {
                String errText = "定位失败," + aMapLocation.getErrorCode() + ": "
                        + aMapLocation.getErrorInfo();
                Log.e("AmapErr", errText);
            }
        }
    }

    /**
     * 添加坐标点，这里可以添加任意坐标点位置
     * @param mylocation
     */
    private void addLocationMarker(LatLng mylocation) {
        float accuracy = (float) ((mylocation.longitude/mylocation.latitude )*100);
        if (locMarker == null) {
            locMarker = addMarker(mylocation);
            if (ac==null){
                ac = aMap.addCircle(new CircleOptions().center(mylocation)
                        .fillColor(Color.argb(0, 98 ,189, 255)).radius(accuracy)
                        .strokeColor(Color.argb(0, 98, 198, 255)).strokeWidth(0));
            }
            if (c==null){
                c = aMap.addCircle(new CircleOptions().center(mylocation)
                        .fillColor(Color.argb(0, 98, 198, 255))
                        .radius(accuracy).strokeColor(Color.argb(0,98, 198, 255))
                        .strokeWidth(0));
            }
            if (d==null){
                d = aMap.addCircle(new CircleOptions().center(mylocation)
                        .fillColor(Color.argb(0, 98, 198, 255))
                        .radius(accuracy).strokeColor(Color.argb(0,98, 198, 255))
                        .strokeWidth(0));
            }
        } else {
            locMarker.setPosition(mylocation);
            ac.setCenter(mylocation);
            ac.setRadius(accuracy);
            c.setCenter(mylocation);
            c.setRadius(accuracy);
            d.setCenter(mylocation);
            d.setRadius(accuracy);
        }
        handle.postDelayed(rb,0);
        handle1.postDelayed(rb1,800);
        handle2.postDelayed(rb2,1600);
    }

    /**
     * 位置波纹扩散动画
     * @param ac
     */
    private void Scalecircle1(final Circle ac) {
        ValueAnimator vm = ValueAnimator.ofFloat(0,(float)ac.getRadius());
        vm.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float curent = (float) animation.getAnimatedValue();
                ac.setRadius(curent);
                aMap.invalidate();
            }
        });
        ValueAnimator vm1 = ValueAnimator.ofInt(160,0);
        vm1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int color = (int) animation.getAnimatedValue();
                ac.setFillColor(Color.argb(color, 98, 198, 255));
                aMap.invalidate();
            }
        });
        vm.setRepeatCount(Integer.MAX_VALUE);
        vm.setRepeatMode(ValueAnimator.RESTART);
        vm1.setRepeatCount(Integer.MAX_VALUE);
        vm1.setRepeatMode(ValueAnimator.RESTART);
        AnimatorSet set = new AnimatorSet();
        set.play(vm).with(vm1);
        set.setDuration(2500);
        set.setInterpolator(interpolator1);
        set.start();
    }
    private final Interpolator interpolator1 = new LinearInterpolator();
    Runnable rb = new Runnable() {
        @Override
        public void run() {
            Scalecircle1(ac);
        }
    };
    Handler handle =new Handler();

    Runnable rb1 = new Runnable() {
        @Override
        public void run() {
            Scalecircle1(c);
        }
    };
    Handler handle1 =new Handler();

    Runnable rb2 = new Runnable() {
        @Override
        public void run() {
            Scalecircle1(d);
        }
    };
    Handler handle2 =new Handler();
}

大部分代码都是高德demo的，我改的是部分代码。
需要注意的：
1、需要用Handler+Runable延迟执行动画时间；
2、每次定位成功只需要改变Marker的坐标及Circle中心点就行；
3、圆的半径例子是：float accuracy = aMapLocation.getAccuracy()；但是地图放大之后变得很小，打印出来看看发现这个值跟：longitude/mylocation * 10差不多，所以我这里直接用这个值，并且还扩大10倍了，如果放很大地图的话，会有大波_{O(∩_∩)O哈哈}
4、aMap.animateCamera(update, 300, callback); 自定义缩放及定位按钮的关键代码，这种是带动画的，当放大缩小，或者定位都会带动画平滑移动地图中心点。不用动画的时候调用：aMap.moveCamera(update); 即可。

有不对的或者更好的方式，欢迎告知，谢谢~

githu地址

最后编辑于：2017.12.08 20:37:48

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,117评论 4赞 360
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 66,963评论 1赞 290
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 107,897评论 0赞 240
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,805评论 0赞 203
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,208评论 3赞 286
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,535评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,797评论 2赞 311
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,493评论 0赞 197
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,215评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,477评论 2赞 244
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 31,988评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,325评论 2赞 252
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,971评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,055评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,807评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,544评论 2赞 271
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,455评论 2赞 266

Android开发——高德地图波纹扩散效果动效及自定义缩放、定位控件

引言

推荐阅读更多精彩内容