Implementing the animation effect of flipping cards

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.

  1. <?xml version= "1.0" encoding= "utf-8" ?>
  2.  
  3. <FrameLayout
  4.  
  5. android:id= "@+id/main_fl_container"  
  6.  
  7. xmlns:android= "http://schemas.android.com/apk/res/android"  
  8.  
  9. xmlns:tools= "http://schemas.android.com/tools"  
  10.  
  11. android:layout_width= "match_parent"  
  12.  
  13. android:layout_height= "match_parent"  
  14.  
  15. android:onClick= "flipCard"  
  16.  
  17. android:paddingBottom= "@dimen/activity_vertical_margin"  
  18.  
  19. android:paddingLeft= "@dimen/activity_horizontal_margin"  
  20.  
  21. android:paddingRight= "@dimen/activity_horizontal_margin"  
  22.  
  23. android:paddingTop= "@dimen/activity_vertical_margin"  
  24.  
  25. tools:context= "me.chunyu.spike.wcl_flip_anim_demo.MainActivity" >
  26.  
  27.   
  28.  
  29. <include
  30.  
  31. layout= "@layout/cell_card_back" />
  32.  
  33.   
  34.  
  35. <include
  36.  
  37. layout= "@layout/cell_card_front" />
  38.  
  39.   
  40.   </FrameLayout>

Logic, initialization animation and camera distance.

  1. @Override
  2.  
  3. protected void onCreate(Bundle savedInstanceState) {
  4.  
  5. super.onCreate(savedInstanceState);
  6.  
  7. setContentView(R.layout.activity_main);
  8.  
  9. ButterKnife.bind(this);
  10.  
  11.   
  12.  
  13. setAnimators(); // Set animation
  14.  
  15. setCameraDistance(); // Set the camera distance
  16.  
  17. }

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.

  1. // Set up the animation
  2.  
  3. private void setAnimators() {
  4.  
  5. mRightOutSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_out);
  6.  
  7. mLeftInSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_in);
  8.  
  9.   
  10.  
  11. // Set up click event
  12.  
  13. mRightOutSet.addListener(new AnimatorListenerAdapter() {
  14.  
  15. @Override public void onAnimationStart(Animator animation) {
  16.  
  17. super.onAnimationStart(animation);
  18.  
  19. mFlContainer.setClickable( false );
  20.  
  21. }
  22.  
  23. });
  24.  
  25. mLeftInSet.addListener(new AnimatorListenerAdapter() {
  26.  
  27. @Override public void onAnimationEnd(Animator animation) {
  28.  
  29. super.onAnimationEnd(animation);
  30.  
  31. mFlContainer.setClickable( true );
  32.  
  33. }
  34.  
  35. });
  36.  
  37. }

Right out animation

  1. <?xml version= "1.0" encoding= "utf-8" ?>
  2.  
  3. < set xmlns:android= "http://schemas.android.com/apk/res/android" >
  4.  
  5. <! --Rotate-->  
  6.  
  7. <objectAnimator
  8.  
  9. android:duration= "@integer/anim_length"  
  10.  
  11. android:propertyName= "rotationY"  
  12.  
  13. android:valueFrom= "0"  
  14.  
  15. android:valueTo= "180" />
  16.  
  17.   
  18.  
  19. <! --disappear-->  
  20.  
  21. <objectAnimator
  22.  
  23. android:duration= "0"  
  24.  
  25. android:propertyName= "alpha"  
  26.  
  27. android:startOffset= "@integer/anim_half_length"  
  28.  
  29. android:valueFrom= "1.0"  
  30.  
  31. android:valueTo= "0.0" />
  32.  
  33. </ set >

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

Left entry animation

  1. <?xml version= "1.0" encoding= "utf-8" ?>
  2.  
  3. < set xmlns:android= "http://schemas.android.com/apk/res/android" >
  4.  
  5.   
  6.  
  7. <! --disappear-->  
  8.  
  9. <objectAnimator
  10.  
  11. android:duration= "0"  
  12.  
  13. android:propertyName= "alpha"  
  14.  
  15. android:valueFrom= "1.0"  
  16.  
  17. android:valueTo= "0.0" />
  18.  
  19.   
  20.  
  21. <! --Rotate-->  
  22.  
  23. <objectAnimator
  24.  
  25. android:duration= "@integer/anim_length"  
  26.  
  27. android:propertyName= "rotationY"  
  28.  
  29. android:valueFrom= "-180"  
  30.  
  31. android:valueTo= "0" />
  32.  
  33.   
  34.  
  35. <! --appears-->  
  36.  
  37. <objectAnimator
  38.  
  39. android:duration= "0"  
  40.  
  41. android:propertyName= "alpha"  
  42.  
  43. android:startOffset= "@integer/anim_half_length"  
  44.  
  45. android:valueFrom= "0.0"  
  46.  
  47. android:valueTo= "1.0" />
  48.  
  49. </ 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.

  1. // Change the viewing angle distance, close to the screen
  2.  
  3. private void setCameraDistance() {
  4.  
  5. int distance = 16000;
  6.  
  7. float scale = getResources().getDisplayMetrics().density * distance;
  8.  
  9. mFlCardFront.setCameraDistance(scale);
  10.  
  11. mFlCardBack.setCameraDistance(scale);
  12.  
  13. }

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.

  1. // Flip the card
  2.  
  3. public void flipCard( View   view ) {
  4.  
  5. // Face up
  6.  
  7. if (!mIsShowBack) {
  8.  
  9. mRightOutSet.setTarget(mFlCardFront);
  10.  
  11. mLeftInSet.setTarget(mFlCardBack);
  12.  
  13. mRightOutSet.start();
  14.  
  15. mLeftInSet.start();
  16.  
  17. mIsShowBack = true ;
  18.  
  19. } else { // Back side facing up
  20.  
  21. mRightOutSet.setTarget(mFlCardBack);
  22.  
  23. mLeftInSet.setTarget(mFlCardFront);
  24.  
  25. mRightOutSet.start();
  26.  
  27. mLeftInSet.start();
  28.  
  29. mIsShowBack = false ;
  30.  
  31. }
  32.  
  33. }

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!

<<:  iOS implements the production of complex interfaces with multiple variable cells

>>:  Style inheritance relationship in Android

Recommend

Farewell, Skoda

If a car brand with sentiment and history fails t...

[Smart Farmers] Why the beautiful Canada goldenrod became the "devil's flower"

Recently, an enthusiastic netizen posted a messag...

Did you know that people who love to chat are less likely to develop dementia?

Author: Sun Taixin, Chief Physician, Beijing Elec...

Practical tips for app promotion! App Marketing Strategy

1. Overall Logic There is only one logic in runni...

Sun Jiadong, Lu Yuanjiu...their names shine in the starry sky

This is Sun Jiadong, winner of the Medal of the R...

7 techniques for shooting Douyin videos to promote products!

As a traffic pool with over 100 million daily act...

MIIT Solicits Opinions on APP Personal Information Protection and Processing

Entering the digital and information age, the wid...

pua popular explanation, what is PUA?

pua popular explanation, what is PUA? PUA origina...

Several reasons why the effect of Baidu's bidding promotion suddenly declined!

As the effect of Baidu bidding hosting promotion ...

How to choose the promotion channel for APP?

After the APP is launched, promoting the product ...

Dopamine VS endorphins, which one brings true happiness?

If you are also a heavy patient of short videos, ...