Làm cách nào để thực hiện chế độ xem với chế độ xem khác bằng Hoạt ảnh thiết kế material design?

Question

Tôi đang cố gắng để đi chức năng xung quanh khác nhau tích hợp với Android Vật liệu Thiết kế nhưng tôi không thể làm kiểu này hình ảnh động khi một cái nhìn đầy khác như thế:

Bạn có biết làm thế nào để làm điều đó hay một thư viện/dự án một ví dụ mà thực hiện điều này?

Answer 1

Các giải pháp để làm điều đó là pathInterpolator và tên của hiệu ứng này là cong chuyển động.

Hoạt ảnh trong thiết kế material design dựa trên các đường cong cho nội suy thời gian và các mẫu chuyển động không gian. Với Android 5.0 (API cấp 21) và ở trên, bạn có thể xác định các đường cong thời gian tùy chỉnh và các mẫu chuyển động cong cho hoạt ảnh.

Bạn có thể thấy làm thế nào để thực hiện nó ở đây:

http://developer.android.com/training/material/animations.html#CurvedMotion

Và mẫu trên GitHub HERE:

Answer 2

Tôi cố gắng để thực hiện điều này dưới API 21

thêm dependancy gradle

dependencies { 
     compile 'com.github.ozodrukh:CircularReveal:1.0.6@aar' 
    } 

hoạt động xml của tôi là

activity_reval_anim.xml

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context=".RevalAnimActivity"> 

    <ImageView 
     android:id="@+id/img_top" 
     android:layout_width="match_parent" 
     android:layout_height="200dp" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true" 
     android:layout_alignParentTop="true" 
     android:background="@color/color_primary" 

     android:src="@drawable/ala"/> 


    <io.codetail.widget.RevealLinearLayout 

     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="match_parent" 
     android:layout_height="200dp" 
     android:layout_below="@+id/img_top" 
     android:background="@color/color_primary"> 
     <LinearLayout 
      android:visibility="invisible" 
      android:id="@+id/ll_reveal" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="@color/color_accent" 
      android:orientation="horizontal" 
      ></LinearLayout> 

    </io.codetail.widget.RevealLinearLayout> 
    <ImageButton 
     android:id="@+id/img_floating_btn" 
     android:layout_width="60dp" 
     android:layout_height="60dp" 
     android:layout_alignParentRight="true" 
     android:layout_marginRight="40dp" 
     android:layout_marginTop="170dp" 
     android:background="@drawable/expand_btn"/> 
</RelativeLayout> 

Hoạt động java của tôi là

RevalAnimActivity.java

public class RevalAnimActivity extends ActionBarActivity { 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_reval_anim); 

     final ImageButton mFloatingButton = (ImageButton) findViewById(R.id.img_floating_btn); 
     mFloatingButton.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 


       animateButton(mFloatingButton); 


      } 


     }); 

    } 

    private void animateButton(final ImageButton mFloatingButton) { 

     mFloatingButton.animate().translationXBy(0.5f).translationY(150).translationXBy(-0.9f) 
       .translationX(-150). setDuration(300).setListener(new AnimatorListenerAdapter() { 
      @Override 
      public void onAnimationEnd(Animator animation) { 
       super.onAnimationEnd(animation); 

       animateReavel((int) mFloatingButton.getX(), 150,mFloatingButton); 
      } 
     }); 

    } 

    private void animateReavel(int cx, int cy, final ImageButton mFloatingButton) { 


     final View myView = findViewById(R.id.ll_reveal); 

     // get the final radius for the clipping circle 
     float finalRadius = hypo(myView.getWidth(), myView.getHeight()); 

     SupportAnimator animator = 
       ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius); 
     animator.addListener(new SupportAnimator.AnimatorListener() { 
      @Override 
      public void onAnimationStart() { 
       mFloatingButton.setVisibility(View.INVISIBLE); 
       myView.setVisibility(View.VISIBLE); 
      } 

      @Override 
      public void onAnimationEnd() { 
       Toast.makeText(getApplicationContext(), "Done", Toast.LENGTH_LONG) 
         .show(); 
      } 

      @Override 
      public void onAnimationCancel() { 
      } 

      @Override 
      public void onAnimationRepeat() { 
      } 
     }); 
     animator.setInterpolator(new AccelerateDecelerateInterpolator()); 
     animator.setDuration(1000); 
     animator.start(); 

    } 

    static float hypo(int a, int b) { 
     return (float) Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); 
    } 


}