Implementing the animation effect of flipping cards

In Android design, card elements are often used, with images or main information displayed on the front and detailed content displayed on the back, such as the word flipping of NetEase Youdao Dictionary and the recipe display of Haidilao. It is very easy to implement card view, but how to implement flip animation?

[[182648]]

When I was eating Haidilao on TB, I used Pad to order food and found that the recipe function of the application used card controls, so I was ready to share with you how to implement it. Friends who are interested can go to Haidilao to have a look :)

GitHub download address of this article source code

https://github.com/SpikeKing/wcl-flip-anim-demo

Welcome to follow my GitHub: https://github.com/SpikeKing

front page

The home page consists of two cards, the front and the back. At the same time, set the click event flipCard.

 <?xml version= "1.0" encoding= "utf-8" ?> 
 
 <FrameLayout 
 
    android:id= "@+id/main_fl_container"   
 
    xmlns:android= "http://schemas.android.com/apk/res/android"   
 
    xmlns:tools= "http://schemas.android.com/tools"   
 
    android:layout_width= "match_parent"   
 
    android:layout_height= "match_parent"   
 
    android:onClick= "flipCard"   
 
    android:paddingBottom= "@dimen/activity_vertical_margin"   
 
    android:paddingLeft= "@dimen/activity_horizontal_margin"   
 
    android:paddingRight= "@dimen/activity_horizontal_margin"   
 
    android:paddingTop= "@dimen/activity_vertical_margin"   
 
    tools:context= "me.chunyu.spike.wcl_flip_anim_demo.MainActivity" > 
 
  
 
 <include 
 
        layout= "@layout/cell_card_back" /> 
 
  
 
 <include 
 
        layout= "@layout/cell_card_front" /> 
 
  
  </FrameLayout>

Logic, initialization animation and camera distance.

 @Override 
 
 protected void onCreate(Bundle savedInstanceState) { 
 
    super.onCreate(savedInstanceState); 
 
    setContentView(R.layout.activity_main); 
 
 ButterKnife.bind(this); 
 
  
 
 setAnimators(); // Set animation 
 
 setCameraDistance(); // Set the camera distance 
 
 }

Animation

Initialize the RightOut and LeftIn animations, using the animation set AnimatorSet.

When the right-out animation starts, the click event is invalid, and when the left-in animation ends, the click event is restored.

 // Set up the animation 
 
 private void setAnimators() { 
 
    mRightOutSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_out); 
 
    mLeftInSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_in); 
 
  
 
 // Set up click event 
 
    mRightOutSet.addListener(new AnimatorListenerAdapter() { 
 
        @Override public void onAnimationStart(Animator animation) { 
 
            super.onAnimationStart(animation); 
 
            mFlContainer.setClickable( false ); 
 
 } 
 
 }); 
 
    mLeftInSet.addListener(new AnimatorListenerAdapter() { 
 
        @Override public void onAnimationEnd(Animator animation) { 
 
            super.onAnimationEnd(animation); 
 
            mFlContainer.setClickable( true ); 
 
 } 
 
 }); 
 
 }

Right out animation

 <?xml version= "1.0" encoding= "utf-8" ?> 
 
 < set xmlns:android= "http://schemas.android.com/apk/res/android" > 
 
 <! --Rotate-->   
 
 <objectAnimator 
 
        android:duration= "@integer/anim_length"   
 
        android:propertyName= "rotationY"   
 
        android:valueFrom= "0"   
 
        android:valueTo= "180" /> 
 
  
 
 <! --disappear-->   
 
 <objectAnimator 
 
 android:duration= "0"   
 
        android:propertyName= "alpha"   
 
        android:startOffset= "@integer/anim_half_length"   
 
        android:valueFrom= "1.0"   
 
        android:valueTo= "0.0" /> 
 
 </ set >

Rotate 180°, and when halfway rotated, the card disappears.

Left entry animation

 <?xml version= "1.0" encoding= "utf-8" ?> 
 
 < set xmlns:android= "http://schemas.android.com/apk/res/android" > 
 
  
 
 <! --disappear-->   
 
 <objectAnimator 
 
 android:duration= "0"   
 
        android:propertyName= "alpha"   
 
        android:valueFrom= "1.0"   
 
        android:valueTo= "0.0" /> 
 
  
 
 <! --Rotate-->   
 
 <objectAnimator 
 
        android:duration= "@integer/anim_length"   
 
        android:propertyName= "rotationY"   
 
        android:valueFrom= "-180"   
 
        android:valueTo= "0" /> 
 
  
 
 <! --appears-->   
 
 <objectAnimator 
 
 android:duration= "0"   
 
        android:propertyName= "alpha"   
 
        android:startOffset= "@integer/anim_half_length"   
 
        android:valueFrom= "0.0"   
 
        android:valueTo= "1.0" /> 
 
 </ set >

It is hidden at the beginning, rotates in reverse, and when halfway rotated, the card is revealed.

Camera Angle

Changing the viewing angle involves rotating the card's Y axis, rotationY, which requires modifying the viewing distance.

If it is not modified, it will exceed the screen height and affect the visual experience.

 // Change the viewing angle distance, close to the screen 
 
 private void setCameraDistance() { 
 
 int distance = 16000; 
 
 float scale = getResources().getDisplayMetrics().density * distance; 
 
    mFlCardFront.setCameraDistance(scale); 
 
    mFlCardBack.setCameraDistance(scale); 
 
 }

Rotation Control

Set the target control for the right-out and left-in animations. The two animations are performed synchronously, and the front and back sides are distinguished.

 // Flip the card 
 
 public void flipCard( View   view ) { 
 
 // Face up 
 
 if (!mIsShowBack) { 
 
        mRightOutSet.setTarget(mFlCardFront); 
 
        mLeftInSet.setTarget(mFlCardBack); 
 
 mRightOutSet.start(); 
 
 mLeftInSet.start(); 
 
 mIsShowBack = true ; 
 
 } else { // Back side facing up 
 
        mRightOutSet.setTarget(mFlCardBack); 
 
        mLeftInSet.setTarget(mFlCardFront); 
 
 mRightOutSet.start(); 
 
 mLeftInSet.start(); 
 
 mIsShowBack = false ; 
 
 } 
 
 }

Animation effects

The animation effect is very simple, and the entire logic is less than 50 lines. It's such a fun animation, so use it.

OK, that's all! Enjoy it!