[譯]Workcation App – 第二部分 .帶有動畫的標記（Animating Markers） 與 MapOverlayLayout

時間  2019-11-25
標籤 workcation app 第二 部分 帶有 動畫 標記 animating markers mapoverlaylayout 简体版
原文   原文鏈接

Workcation App – 第二部分 . 帶有動畫的標記（Animating Markers） 與 MapOverlayLayout

歡迎閱讀本系列文章的第二篇，此係列文章和我前一段時間完成的「研究發」項目有關。在文章裏，我會針對開發中遇到的動畫問題分享一些解決辦法。javascript

Part 1: 自定義 Fragment 轉場前端

Part 2: 帶有動畫的標記（Animating Markers） 與 MapOverlayLayout java

Part 3: 帶有動畫的標記（Animated Markers） 與 RecyclerView 的互動react

Part 4: 場景（Scenes）和 RecyclerView 的共享元素轉場動畫（Shared Element Transition）android

項目的 Git 地址: Workcation Appios

動畫的 Dribbble 地址: dribbble.com/shots/28812…git

序言

幾個月前咱們開了一個部門會議，在會議上個人朋友 Paweł Szymankiewicz 給我演示了他在本身的「研發」項目上製做的動畫。我很是喜歡這個動畫，會後決定用代碼實現它。我可沒想到到我會攤上啥...github

GIF 1 「動畫效果」canvas

開始吧！

就像上面 GIF 動畫展現的，須要作的事情有不少。後端

  1. 在點擊底部菜單欄最右方的菜單後，咱們會跳轉到一個新界面。在此界面中，地圖經過縮放和漸顯的轉場動畫在屏幕上方加載，Recycleview 的 item 隨着轉場動畫從底部加載，地圖上的標記點在轉場動畫執行的同時被添加到地圖上.

  2. 當滑動底部的 RecycleView item 的時候，地圖上的標記會經過閃爍來顯示它們的位置(譯者注：原文是show their position on the map，我的認爲 position 有兩層含義：一表明標記在地圖上的位置，二表明標記所對應的 item 在 RecycleView 裏序列的位置。)

  3. 在點擊一個 item 之後，咱們會進入到新界面。在此界面中，地圖經過動畫方式來顯示出路徑以及起始/結束標記。同時此 RecyclerView 的item 會經過轉場動畫展現一些關於此地點的描述，背景圖片也會放大，還附有更詳細的信息和一個按鈕。

  4. 當後退時，詳情頁經過轉場變成普通的 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 更新。若是有任何疑問，歡迎評論。若是以爲有幫助的話，不要忘記分享喲。

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程