本文讲的是[译]Workcation App – 第二部分 .带有动画的标记（Animating Markers）与 MapOverlayLayout，

原文地址：Workcation App – Part 2. Animating Markers with MapOverlayLayout

原文作者：Mariusz Brona

译文出自：掘金翻译计划

译者：龙骑将杨影枫

校对者：Vivienmm、张拭心

Workcation App – 第二部分 . 带有动画的标记（Animating Markers）与 MapOverlayLayout

欢迎阅读本系列文章的第二篇，此系列文章和我前一段时间完成的“研究发”项目有关。在文章里，我会针对开发中遇到的动画问题分享一些解决办法。

Part 1: 自定义 Fragment 转场

Part 2: 带有动画的标记（Animating Markers）与 MapOverlayLayout

Part 3: 带有动画的标记（Animated Markers）与 RecyclerView 的互动

Part 4: 场景（Scenes）和 RecyclerView 的共享元素转场动画（Shared Element Transition）

项目的 Git 地址: Workcation App

动画的 Dribbble 地址: dribbble.com/shots/28812…

序言

几个月前我们开了一个部门会议，在会议上我的朋友 Paweł Szymankiewicz 给我演示了他在自己的“研发”项目上制作的动画。我非常喜欢这个动画，会后决定用代码实现它。我可没想到到我会摊上啥...

GIF 1 “动画效果”

开始吧！

就像上面 GIF 动画展示的，需要做的事情有很多。

在点击底部菜单栏最右方的菜单后，我们会跳转到一个新界面。在此界面中，地图通过缩放和渐显的转场动画在屏幕上方加载，Recycleview 的 item 随着转场动画从底部加载，地图上的标记点在转场动画执行的同时被添加到地图上.
当滑动底部的 RecycleView item 的时候，地图上的标记会通过闪烁来显示它们的位置(译者注：原文是show their position on the map，个人认为 position 有两层含义：一代表标记在地图上的位置，二代表标记所对应的 item 在 RecycleView 里序列的位置。)
在点击一个 item 以后，我们会进入到新界面。在此界面中，地图通过动画方式来显示出路径以及起始/结束标记。同时此 RecyclerView 的item 会通过转场动画展示一些关于此地点的描述，背景图片也会放大，还附有更详细的信息和一个按钮。
当后退时，详情页通过转场变成普通的 RecycleView Item，所有的地图标记再次显示，同时路径一起消失。

就这么多啦，这就是我准备在这一系列文章中向你展示的东西。在本文中我会编写地图加载以及神秘的 MapWrapperLayout。敬请期待！

需求

所以下一步的需求是：加载地图时展示所有由 API (一个解析 assets 文件夹中 JSON 文件的简单单例)提供的标记。幸运的是，前一章节里我们已经描述过这些标记了。再下一步的需求是：使用渐显和缩放动画来加载这些标记。听起来很简单，但理想和现实总是有差距的。

不幸的是，谷歌地图 API 只允许我们传递 BitmapDescriptor 类型的标记图标做参数，就像下面那样：

Java

GoogleMap map=...// 获得地图

   // 通过蓝色的标记标注旧金山的位置

   Marker marker=map.add(new MarkerOptions()

       .position(new LatLng(37.7750,122.4183))

       .title("San Francisco")

       .snippet("Population: 776733"))

       .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE));

如效果所示，我们需要在加载时实现标记渐显和缩放动画，滑动 RecycleView 的时候实现标记闪烁动画，进入详情页面的时候让标记在渐隐动画中隐藏。使用帧动画或者属性动画（Animation/ViewPropertyAnimator API）会更合理一些.我们有解决这个问题的方法吗？当然，我们有！

MapOverlayLayout

该怎么办呢？其实很简单，但我还是花了点时间才弄明白。我们需要在 SupportMapFragment 上（注：也就是上一篇提到的 MapFragment）添加一层使用谷歌地图 API 所获得的 MapOverlayLayout，在该层上添加地图的映射（映射是用来转换屏幕上的的坐标和地理位置的实际坐标，参见此文档）。

注：此处作者 via以后就没东西了，我估计是手滑写错了。下面有个一模一样的句子，但是多了一个说明，故此处按照下文翻译。

类 MapOverlayLayout 是一个自定义的帧布局（FrameLayout），该布局和 MapFragment 大小位置完全相同。当地图加载完毕的时候，我们可以将 MapOverlayLayout 作为参数传递给 MapFragment，通过它用动画加载自定义的 View 、根据手势移动地图镜头之类的事情。当然了，我们可以做现在需要的事情 —— 通过缩放和渐显动画添加标记（也就是现在的自定义 View)、隐藏标记、当滑动 RecycleView 让标记开始闪烁。

MapOverlayLayout – 添加

怎么样用 SupportMapFragment 和谷歌地图添加一个 MapOverlayLayout 呢？

第一步,让我们先看看 DetailsFragment 的 XML 文件:


<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">



    <fragment

        android:id="@+id/mapFragment"

        class="com.google.android.gms.maps.SupportMapFragment"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_marginBottom="@dimen/map_margin_bottom"/>



    <com.droidsonroids.workcation.common.maps.PulseOverlayLayout

        android:id="@+id/mapOverlayLayout"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_marginBottom="@dimen/map_margin_bottom">



        <ImageView

            android:id="@+id/mapPlaceholder"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:transitionName="@string/mapPlaceholderTransition"/>



        </com.droidsonroids.workcation.common.maps.PulseOverlayLayout>

    ...

</android.support.design.widget.CoordinatorLayout>

如我们所见，有一个和 SupportMapFragment 尺寸相同、位置（marginBottom）也一样的 PulseOverlayLayout 盖在（SupportMapFragment ）上面。PulseOverlayLayout 继承自 MapOverlayLayout，根据 app 需要添加了自己独有的逻辑（比如说点击 RecycleView 时在界面上添加开始标记与结束标记，创建 PulseMarkerView _ 一个在之后会解释的自定义 View）。在布局中还包含一个 ImageView，这是我之前准备创建的转场动画的占位符。 xml 的工作就完成了，现在就开始专注于代码实现 —— DetailsFragment。

现在就开始专注于代码实现 DetailsFragment。

public class DetailsFragment extends MvpFragment<DetailsFragmentView,DetailsFragmentPresenter>

        implements DetailsFragmentView, OnMapReadyCallback{

    public static final String TAG = DetailsFragment.class.getSimpleName();



    @BindView(R.id.recyclerview)
    RecyclerView recyclerView;

    @BindView(R.id.container)
    FrameLayout containerLayout;

    @BindView(R.id.mapPlaceholder)
    ImageView mapPlaceholder;

    @BindView(R.id.mapOverlayLayout)
    PulseOverlayLayout mapOverlayLayout;



    @Override

    public void onViewCreated(final View view,@Nullable final Bundle savedInstanceState){

        super.onViewCreated(view,savedInstanceState);

        setupBaliData();

        setupMapFragment();

    }



    private void setupBaliData(){

        presenter.provideBaliData();

    }



    private void setupMapFragment(){

        ((SupportMapFragment)getChildFragmentManager().findFragmentById(R.id.mapFragment)).getMapAsync(this);

    }



    @Override

    public void onMapReady(final GoogleMap googleMap){

        mapOverlayLayout.setupMap(googleMap);

        setupGoogleMap();

    }



    private void setupGoogleMap(){

        presenter.moveMapAndAddMarker();

    }



    @Override

    public void provideBaliData(final List<Place>places){

        baliPlaces=places;

    }



    @Override

    public void moveMapAndAddMaker(final LatLngBounds latLngBounds){

        mapOverlayLayout.moveCamera(latLngBounds);

        mapOverlayLayout.setOnCameraIdleListener(()->{

            for(int i=0;i<baliPlaces.size();i++){

                mapOverlayLayout.createAndShowMarker(i,baliPlaces.get(i).getLatLng());

            }

            mapOverlayLayout.setOnCameraIdleListener(null);

        });

        mapOverlayLayout.setOnCameraMoveListener(mapOverlayLayout::refresh);

    }

}

如上所示，地图通过 onMapReady 和上一篇一样进行加载。在接收回调后。我们就可以更新地图的边界，在 MapOverlayLayout 添加标记，设置监听。

在下面的代码中，我们会把地图镜头移动到可以展示我们所有标记的地方。然后当镜头移动完毕时，在地图上创造并展示标记。在这之后，我们设置 OnCameraIdleListener 空（null）。因为我们希望再次移动镜头时不要添加标记。在最后一行代码中，我们为 OnCameraMoveListener 设置了刷新所有标记位置的动作。

@Override

    public void moveMapAndAddMaker(final LatLngBounds latLngBounds){

        mapOverlayLayout.moveCamera(latLngBounds);

        mapOverlayLayout.setOnCameraIdleListener(()->{

            for(int i=0;i<baliPlaces.size();i++){

                mapOverlayLayout.createAndShowMarker(i,baliPlaces.get(i).getLatLng());

            }

            mapOverlayLayout.setOnCameraIdleListener(null);

        });

        mapOverlayLayout.setOnCameraMoveListener(mapOverlayLayout::refresh);

    }

MapOverlayLayout – 它是怎么工作的呢？

那么它究竟是如何工作的呢？

通过地图映射(映射是用来转换屏幕上的的坐标和地理位置的实际坐标，参见此文档)。我们可以拿到标记的横坐标与纵坐标，通过坐标来在 MapOverlayLayout 上放置标记的自定义 View。

这种做法可以让我们使用比如自定义 View 的属性动画（ViewPropertyAnimator ）API 创建动画效果。

public class MapOverlayLayout<V extends MarkerView> extends FrameLayout{



    protected List<V> markersList;

    protected Polyline currentPolyline;

    protected GoogleMap googleMap;

    protected ArrayList<LatLng>polylines;



    public MapOverlayLayout(final Context context){

        this(context,null);

    }



    public MapOverlayLayout(final Context context,final AttributeSet attrs){

        super(context,attrs);

        markersList=newArrayList<>();

    }



    protected void addMarker(final V view){

        markersList.add(view);

        addView(view);

    }



    protected void removeMarker(final V view){

        markersList.remove(view);

        removeView(view);

    }



    public void showMarker(final int position){

        markersList.get(position).show();

    }



    private void refresh(final int position,final Point point){

        markersList.get(position).refresh(point);

    }



    public void setupMap(final GoogleMap googleMap){

        this.googleMap = googleMap;

    }



    public void refresh(){

        Projection projection=googleMap.getProjection();

        for(int i=0;i<markersList.size();i++){

            refresh(i,projection.toScreenLocation(markersList.get(i).latLng()));

        }

    }



    public void setOnCameraIdleListener(final GoogleMap.OnCameraIdleListener listener){

        googleMap.setOnCameraIdleListener(listener);

    }



    public void setOnCameraMoveListener(final GoogleMap.OnCameraMoveListener listener){

        googleMap.setOnCameraMoveListener(listener);

    }



    public void moveCamera(final LatLngBounds latLngBounds){

        googleMap.moveCamera(CameraUpdateFactory.newLatLngBounds(latLngBounds,150));

    }

}

解释一下在 moveMapAndAddMarker 里调用的方法：为 CameraListeners 监听提供了 set 方法；刷新方法是为了更新标记的位置；addMarker 和 removeMarker 是用来添加 MarkerView (也就是上文所说的自定义 view )到布局和列表中。通过这个方案，MapOverlayLayout持有了所有被添加到自身的 View 引用。在类的最上面的是继承自自定义 View —— MarkerView —— 的泛型。MarkerView 是一个继承自 View 的抽象类，看起来像这样：

public abstract class MarkerView extends View{



    protected Point point;

    protected LatLng latLng;



    private MarkerView(final Context context){

        super(context);

    }



    public MarkerView (final Context context,final LatLng latLng,final Point point){

        this(context);

        this.latLng=latLng;

        this.point=point;

    }



    public double lat(){

        return latLng.latitude;

    }



    public double lng(){

        return latLng.longitude;

    }



    public Point point(){

        return point;

    }



    public LatLng latLng(){

        return latLng;

    }



    public abstract voi dshow();



    public abstract void hide();



    public abstract void refresh(final Point point);

}

通过抽象方法 show, hide 和 refresh ，我们能够指定该标记显示、消失和刷新的方式。它还需要 Context 对象、经纬度和在屏幕上的坐标点。我们一起来看看它的实现类：

public class PulseMarkerView extends MarkerView{

    private static final int STROKE_DIMEN=2;



    private Animation scaleAnimation;

    private Paint strokeBackgroundPaint;

    private Paint backgroundPaint;

    private String text;

    private Paint textPaint;

    private AnimatorSet showAnimatorSet,hideAnimatorSet;



    public PulseMarkerView(final Context context,final LatLng latLng,final Point point){

        super(context,latLng,point);

        this.context=context;

        setVisibility(View.INVISIBLE);

        setupSizes(context);

        setupScaleAnimation(context);

        setupBackgroundPaint(context);

        setupStrokeBackgroundPaint(context);

        setupTextPaint(context);

        setupShowAnimatorSet();

        setupHideAnimatorSet();

    }



    public PulseMarkerView(final Context context,final LatLng latLng,final Point point,final int position){

        this(context,latLng,point);

        text=String.valueOf(position);

    }



    private void setupHideAnimatorSet(){

        Animator animatorScaleX=ObjectAnimator.ofFloat(this,View.SCALE_X,1.0f,0.f);

        Animator animatorScaleY=ObjectAnimator.ofFloat(this,View.SCALE_Y,1.0f,0.f);

        Animator animator=ObjectAnimator.ofFloat(this,View.ALPHA,1.f,0.f).setDuration(300);

        animator.addListener(newAnimatorListenerAdapter(){

            @Override

            publicvoidonAnimationStart(finalAnimator animation){

                super.onAnimationStart(animation);

                setVisibility(View.INVISIBLE);

                invalidate();

            }

        });

        hideAnimatorSet=newAnimatorSet();

        hideAnimatorSet.playTogether(animator,animatorScaleX,animatorScaleY);

    }



    private void setupSizes(finalContext context){

        size=GuiUtils.dpToPx(context,32)/2;

    }



    private void setupShowAnimatorSet(){

        Animator animatorScaleX=ObjectAnimator.ofFloat(this,View.SCALE_X,1.5f,1.f);

        Animator animatorScaleY=ObjectAnimator.ofFloat(this,View.SCALE_Y,1.5f,1.f);

        Animator animator=ObjectAnimator.ofFloat(this,View.ALPHA,0.f,1.f).setDuration(300);

        animator.addListener(newAnimatorListenerAdapter(){

            @Override

            public void onAnimationStart(finalAnimator animation){

                super.onAnimationStart(animation);

                setVisibility(View.VISIBLE);

                invalidate();

            }

        });

        showAnimatorSet = newAnimatorSet();

        showAnimatorSet.playTogether(animator,animatorScaleX,animatorScaleY);

    }



    private void setupScaleAnimation(final Context context){

        scaleAnimation=AnimationUtils.loadAnimation(context,R.anim.pulse);

        scaleAnimation.setDuration(100);

    }



    private void setupTextPaint(final Context context){

        textPaint=newPaint();

        textPaint.setColor(ContextCompat.getColor(context,R.color.white));

        textPaint.setTextAlign(Paint.Align.CENTER);

        textPaint.setTextSize(context.getResources().getDimensionPixelSize(R.dimen.textsize_medium));

    }



    private void setupStrokeBackgroundPaint(final Context context){

        strokeBackgroundPaint=newPaint();

        strokeBackgroundPaint.setColor(ContextCompat.getColor(context,android.R.color.white));

        strokeBackgroundPaint.setStyle(Paint.Style.STROKE);

        strokeBackgroundPaint.setAntiAlias(true);

        strokeBackgroundPaint.setStrokeWidth(GuiUtils.dpToPx(context,STROKE_DIMEN));

    }



    private void setupBackgroundPaint(final Context context){

        backgroundPaint=newPaint();

        backgroundPaint.setColor(ContextCompat.getColor(context,android.R.color.holo_red_dark));

        backgroundPaint.setAntiAlias(true);

    }



    @Override

    public void setLayoutParams(final ViewGroup.LayoutParams params){

        FrameLayout.LayoutParams frameParams=newFrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT,FrameLayout.LayoutParams.WRAP_CONTENT);

        frameParams.width=(int)GuiUtils.dpToPx(context,44);

        frameParams.height=(int)GuiUtils.dpToPx(context,44);

        frameParams.leftMargin=point.x-frameParams.width/2;

        frameParams.topMargin=point.y-frameParams.height/2;

        super.setLayoutParams(frameParams);

    }



    public void pulse(){

        startAnimation(scaleAnimation);

    }



    @Override

    protected void onDraw(final Canvas canvas){

        drawBackground(canvas);

        drawStrokeBackground(canvas);

        drawText(canvas);

        super.onDraw(canvas);

    }



    private void drawText(final Canvas canvas){

        if(text!=null&&!TextUtils.isEmpty(text))

            canvas.drawText(text,size,(size-((textPaint.descent()+textPaint.ascent())/2)),textPaint);

    }



    private void drawStrokeBackground(final Canvas canvas){

        canvas.drawCircle(size,size,GuiUtils.dpToPx(context,28)/2,strokeBackgroundPaint);

    }



    private void drawBackground(final Canvas canvas){

        canvas.drawCircle(size,size,size,backgroundPaint);

    }



    public void setText(Stringtext){

        this.text=text;

        invalidate();

    }



    @Override

    public void hide(){

        hideAnimatorSet.start();

    }



    @Override

    public void refresh(finalPoint point){

        this.point=point;

        updatePulseViewLayoutParams(point);

    }



    @Override

    public void show(){

        showAnimatorSet.start();

    }



    public void showWithDelay(final int delay){

        showAnimatorSet.setStartDelay(delay);

        showAnimatorSet.start();

    }



    public void updatePulseViewLayoutParams(final Point point){

        this.point=point;

        FrameLayout.LayoutParams params=newFrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT,FrameLayout.LayoutParams.WRAP_CONTENT);

        params.width=(int)GuiUtils.dpToPx(context,44);

        params.height=(int)GuiUtils.dpToPx(context,44);

        params.leftMargin=point.x-params.width/2;

        params.topMargin=point.y-params.height/2;

        super.setLayoutParams(params);

        invalidate();

    }

}

这是继承自 MarkerView 的 PulseMarkerView。在构造方法（constructor）中，我们设置一个显示、消失和闪烁的动画序列(AnimatorSets)。在重写 MarkerView 的方法里，我们只是单纯的启动了这个动画序列。updatePulseViewLayoutParams 中更新了屏幕上的 PulseViewMarker。接下来就是使用构造方法里创建的 Paints 来绘制界面。

效果：

加载地图和滑动 RecycleView

移动地图镜头时刷新标记

地图缩放

缩放和滚动效果

总结

如上所示，这种做法有一个巨大的优势 —— 我们可以广泛的使用自定义 View 的力量。不过呢，移动地图和刷新标记位置的时候会有一点小延迟。和完成的需求相比，这是可以可以接受的代价。

多谢阅读！下一篇会在周二 14:03 更新。如果有任何疑问，欢迎评论。如果觉得有帮助的话，不要忘记分享哟。

原文发布时间为：2017年6月05日

本文来自云栖社区合作伙伴掘金，了解相关信息可以关注掘金网站。

[译]Workcation App – 第二部分 .带有动画的标记（Animating Markers）与 MapOverlayLayout

Workcation App – 第二部分 . 带有动画的标记（Animating Markers）与 MapOverlayLayout

序言

开始吧！

需求

MapOverlayLayout

MapOverlayLayout – 添加

MapOverlayLayout – 它是怎么工作的呢？

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

[译]Workcation App – 第二部分 .带有动画的标记（Animating Markers） 与 MapOverlayLayout

Workcation App – 第二部分 . 带有动画的标记（Animating Markers） 与 MapOverlayLayout

序言

开始吧！

需求

MapOverlayLayout

MapOverlayLayout – 添加

MapOverlayLayout – 它是怎么工作的呢？

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

[译]Workcation App – 第二部分 .带有动画的标记（Animating Markers）与 MapOverlayLayout

Workcation App – 第二部分 . 带有动画的标记（Animating Markers）与 MapOverlayLayout