Introduction to the

This article analyzes how to achieve this card effect and what functions are available, based on whether these functions can be improved to make the framework more flexible, extensible, etc. Now packaged into a generic framework. The renderings are as follows:

The code address

1. Functional analysis

Both tantan and Momo dot matching module operate the card’s left and right swipe. Then, the functions involved in momo dot matching module analysis are as follows:

  • Card reuse mechanism
  • Animation of dragging and dropping cards
    • The card drags the upper left, lower left, upper right, and lower right will have corresponding rotation animation
  • Like the function
    • The “like” function is divided into dragging the card to the right and clicking the “like” button below to control the card.
  • Don’t like features
    • Disliking features is the same as liking feature logic, but in a different direction.
  • Super like feature
    • Super like function is the same as like function, only for VIP users, ordinary users need to recharge VIP to use, VIP users trigger super like, there will be a dazzling animation effects, and other business processing
  • The fallback function
    • The rollback function is also designed for VIP users. VIP users can only roll back one card at a time. We realize the rollback function, so that the outside control can be rolled back function, more flexible.
  • Preloading function
    • Cards can slip away indefinitely, so the data source fetching must support loading more data.
  • No data processing function
    • Once the card data is processed, you have to deal with no data, display a placeholder map, and so on.
  • When triggering the card like function, check whether this operation is allowed
    • This is also done on a business basis,For specificsInside, there seems to be a limit to the like operation. If the limit is exceeded, triggering the like function again will prompt you to recharge the VIP and drag the card back to its original position.

2. Function realization

After completing the above functional analysis, we can implement it one by one.

  • Card reuse mechanism

    Four cards are used here. After the top card is removed, it will be put in the bottom layer for reuse.

  • Animation of dragging and dropping cards

    The card drags the upper left, lower left, upper right, and lower right will have corresponding rotation animation. We can determine the position of the point triggered by the user’s gesture, and set the relevant rotation Angle according to the orientation. The left and right are opposite.

  • Like and dislike features

    1. Add a drag gesture to each card by dragging the card. When dragging the card, judge whether the card is left or right according to the dragging distance and the original center point X value of the card.

    2. When the button is triggered, specify the X position of the card. Then the internal unity of the way to end the gesture.

  • Super like function super like function, in fact, is also a kind of like, through the button trigger like operation, then add their own dazzling animation and business logic.

  • The fallback function

    The implementation of card back, put the bottom card on the top of the top card and add entry animation, while updating the corresponding index data. Momo VIP users can only return one card, we can design to support multiple cards, how many cards do not like, how many cards can be returned by default, if you want to achieve one, the outside world can control. The relevant methods are as follows:There are a lot of scenarios for backsliding, such as: left slide 10 times, then right slide 4 times, backslide 5 times, and slide again and again, so how to ensure that the cards are displayed in the normal order? Here we use two arrays to process, the first array holds the left slide data index, the second array holds the back index. Take a look at the screenshots for specific ideas:

  • Each time a card is crossed out, the preloading function will call back the corresponding data source Index for the upper layer to update the display content of the bottom card. When the card is crossed out, it will also check to see if the current Index is less than a value relative to the total number of data sources, which is called the threshold. Less than this threshold triggers the loading of more agent callbacks.

  • The processing function with no data will update the display content of the bottom card every time a card is crossed out. If the data index of the internal card exceeds the total number of external data sources, the card content will be hidden and no data will be detected.

  • When triggering the card like function, it is necessary to detect whether this operation is allowed. At the end of the drag gesture, the agent will ask whether sliding is allowed. If not, the drag distance X value will be changed internally, and the reset logic will be used.

3, summarize

There are many details of card interaction, many control places are also many, the packaged framework now supports all of the above functions, when using, you can customize the card cell to achieve their own style. A sample demo is provided. Welcome to preview.