どのようにアンドロイド素材のデザインで次のアニメーションを達成するには？

Question

このアニメーションをAndroidで実現したいと思います。何か助けてください。

Answer 1

これはテストしていませんが、うまくいくはずです。

LinearLayout mRevealView; 
boolean hidden = true; 

があなたのonCreateメソッドでこれを追加します：

mRevealView = (LinearLayout) findViewById(R.id.reveal_items); 
mRevealView.setVisibility(View.INVISIBLE); 

compile 'com.github.ozodrukh:CircularReveal:1.1.1'

は、あなたの活動の先頭にこれらの変数を宣言します。

アプリへのGradleファイルをこの依存関係を追加します。 FABのonClickメソッドで、次のように追加します。

int cx = (mRevealView.getLeft() + mRevealView.getRight()); 
     int cy = mRevealView.getTop(); 
     int radius = Math.max(mRevealView.getWidth(), mRevealView.getHeight()); 

     //Below Android LOLIPOP Version 
     if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) { 
      SupportAnimator animator = 
        ViewAnimationUtils.createCircularReveal(mRevealView, cx, cy, 0, radius); 
      animator.setInterpolator(new AccelerateDecelerateInterpolator()); 
      animator.setDuration(700); 

      SupportAnimator animator_reverse = animator.reverse(); 

      if (hidden) { 
       mRevealView.setVisibility(View.VISIBLE); 
       animator.start(); 
       hidden = false; 
      } else { 
       animator_reverse.addListener(new SupportAnimator.AnimatorListener() { 
        @Override 
        public void onAnimationStart() { 

        } 

        @Override 
        public void onAnimationEnd() { 
         mRevealView.setVisibility(View.INVISIBLE); 
         hidden = true; 

        } 

        @Override 
        public void onAnimationCancel() { 

        } 

        @Override 
        public void onAnimationRepeat() { 

        } 
       }); 
       animator_reverse.start(); 
      } 
     } 
     // Android LOLIPOP And ABOVE Version 
     else { 
      if (hidden) { 
       Animator anim = android.view.ViewAnimationUtils. 
         createCircularReveal(mRevealView, cx, cy, 0, radius); 
       mRevealView.setVisibility(View.VISIBLE); 
       anim.start(); 
       hidden = false; 
      } else { 
       Animator anim = android.view.ViewAnimationUtils. 
         createCircularReveal(mRevealView, cx, cy, radius, 0); 
       anim.addListener(new AnimatorListenerAdapter() { 
        @Override 
        public void onAnimationEnd(Animator animation) { 
         super.onAnimationEnd(animation); 
         mRevealView.setVisibility(View.INVISIBLE); 
         hidden = true; 
        } 
       }); 
       anim.start(); 
      } 
     } 

は、あなたの活動に、このメソッドを追加します。それはだ、これが機能する

<io.codetail.widget.RevealFrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_marginTop="?attr/actionBarSize"> 

    //You can include whatever layout you want here 
    <include layout="@layout/layout_you_want_to_show" /> 

</io.codetail.widget.RevealFrameLayout> 

：

private void hideRevealView() { 
    if (mRevealView.getVisibility() == View.VISIBLE) { 
     mRevealView.setVisibility(View.INVISIBLE); 
     hidden = true; 
    } 
} 

は、それがreveal_layout.xml及びこれを追加呼んで、明らかにのための新しいXMLレイアウトを作成します。これをアクティビティのレイアウトの最後に追加することが必須です。

<FrameLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 

    <include layout="@layout/reveal_layout" /> 

</FrameLayout>