preface

This article is actually a companion to the H5 Page Performance Tuning Load. I want to introduce FLIP to you from the perspective of CSS animation, which can help you create really lightweight animations to improve the performance of Web animation.

Many students usually don’t pay attention to the movie, think compared animation business logic gild the lily, sometimes also affects page performance, so the development time is can province province, actually otherwise, the development of business logic is to first, of course, but also not to look down upon the animation, in certain scenarios, it can play a role of can even keep pace with the business goals. But there’s a big premise that requires smooth animation, and FLIP technology comes along to help you create truly lightweight animation.

FLIP technology

FLIP is a memory device and technology First proposed by @Paul Lewis. FLIP is an acronym for First, Last, Invert and Play.

FLIP maps some low-performing animations to Transform animations. By taking two snapshots of the element, one of its initial position (First — F) and the other of its final position (Last — L), and then inverting the element with a transform (Invert -i), the element looks like it’s still in its initial position. Finally, remove the transform on the element to move the element from its initial position (Play -p) to its final position.

This is a high performance way to dynamically change the position and size of DOM elements, regardless of how the layout is computed or rendered (e.g., height, width, float, absolute positioning, Flexbox, Grid, etc.).

The above process can be broken down into four steps:

1. First

The initial state of the element, which records the current element’s position, size, transparency, and so on

2. Last

The final state of an element, which is style information about its position, size, transparency, and so on after animation

3. Invert

Restore the element to its pre-animation state, that is, reverse operation. First, calculate the changes of the element from its initial state to its final state, such as width, height, transparency, etc. Then, apply transform or opacity on the element to reverse these changes, giving an illusion that it was originally in its initial position.

This step is the key, is the core of this technology, we illustrate: if there is now a picture list, there are two pictures img1, initial img2, then at the beginning of the list to join the new img3 images, img4, where img1 and img2 will be pushed to behind.

Transform = translate(-100px, -100px); transform = translate(-100px, -100px) Invert it back to its original position.

4. Play

Perform the animation, all the preparatory work is done, and finally Play, remove the transform on the element (set transform to 0 or None) and enable the tansition-related animation.

In order to better understand the principle of FLIP technology, borrowdavidkpianoThe flow chart I used in my share shows you, which is probably easier to understand:

implementation

After understanding the principle of PLIP technology, we will implement a simple small example to better understand this concept, realize the card add and delete animation.

First we initialize a list as shown below:

Then follow the above four steps to develop add delete animation.

First

Since the size of the card does not change during the animation, we only need to record the position of the card

let cardIndex = 4
let activeList = null

// Generate initial test data
let listData = Array(cardIndex).fill().map((item, index) = > ({
  index
}))

// First
activeList.forEach((itemEle, index) = > {
  rectInfo = itemEle.getBoundingClientRect()
  transArr[index + stepIndex][0] = rectInfo.left
  transArr[index + stepIndex][1] = rectInfo.top
})
Copy the code

Last

The end state of the animation is actually the position information of other cards after adding or deleting cards

// 0 flag increment, Let newListData = null activeIndex = currentIndex if (updateType === 0) {// Add a card newListData = this.state.listData.slice(0, activeIndex).concat({ index: cardIndex++ }, This. State. ListData. Slice (activeIndex))} else {/ / remove card newListData = this. State. ListData) filter ((value, index) => index ! == activeIndex) }Copy the code

Invert

Once you have the position information of the card affected at the beginning of the animation (newListData), you can reverse the position of the element using the Transform property

// Add 1 to 0 and delete
const updateIndex = updateType === 0 ? 1 : 0
activeList.forEach((item, index) = > {
  rect = item.getBoundingClientRect()
  invertArr[index + updateIndex][0] = invertArr[index + updateIndex][0] - rect.left
   invertArr[index + updateIndex][1] = invertArr[index + updateIndex][1] - rect.top
Copy the code

Play

Once reversed, it was easy to get him to animate

// Generate a two-dimensional array
function getArrByLen(len) {
  return Array(len).fill().map(() = > [0.0])
}

invertArr = getArrByLen(this.state.listData.length)

<li lassName={`card-item${index >= activeIndex ? ' active' : ' '}`} style={index >= activeIndex ? {transform: `translate(${invertArr[index - activeIndex][0]}px, ${invertArr[index - activeIndex][1]}px)`} : null)} >... Body area </li>Copy the code

In addition, as there may be occlusion problems in card arrangement, z-index can be initialized to 1 here, and then z-index can be improved to obtain a better visual experience when the level of horizontal row changes.

if (transArr[index + stepIndex][1] ! == 0) { this.state.listData.some((v, k) => { if (index + stepIndex + activeIndex === k) { v.zIndex = zIndex++ return true } return false }) }Copy the code

Finally, let’s take a look at the effect

FLIP Animation application scene

The FLIP technique is suitable for situations where the initial or final state of the animation is unclear, and it is very easy to animate with FLIP.

Such as: Render an image list, when a certain element of insert or delete items, it would suddenly appear or disappear, and other sibling elements can teleport, this is very bad for the user experience, at this time unless you are a qualified die each element size and the size of the whole page, otherwise you cannot clear when you any insert or delete an element, Where the other element items should be. This is where you can use the FLIP technique to add transition animations to the list operations.

When creating the UI, add sensible UI transitions to avoid jumps and teleportation. If you incorporate some of the natural movements of life into your UI effects, it will make your users’ eyes shine. After all, everything you interact with comes from the natural movement of life.

But for some animations where you know exactly what the initial and final states are, you can just use the transform instead of the FLIP.

In conclusion, FLIP technology is mainly applied to the following scenarios:

  • Transitions between views
  • Image expansion and contraction effects
  • The effect of filling in blank areas when items are deleted and added
  • Reordering of grid entries

FLIP improves animation fluency

The biggest advantage of FLIP is to improve the smoothiness of animation. Paul Kinlan of Google once conducted a survey about what features users expected most from news apps. Surprisingly, the most popular voice was not offline support, not cross-platform synchronization, not better notification methods, but a desire for smoother use. Smooth means no screen flicker, no stutter, no shake.

When a user interacts on a web page, such as click, touch, etc., it takes about 100ms of physiological reaction time from the end of the interaction to the perceived response of the program. If your site responds within 100ms, it’s an instant response from the user’s point of view. Otherwise the user will feel sluggish and react slowly.

We can make full use of the user’s 100ms physiological reaction time to make relevant calculations: GetBoundingClientRect or getComputedStyle. FLIP technology is used to make animation start as soon as possible. Finally, transform and opacity animation are used to ensure smooth operation of animation.

This is a schematic of user interaction experience. Based on 100ms physiological reaction time, we need to prepare animations within 100ms after user interaction and then run animations at 60fps. Why 60fps? I won’t go into that here, but if you’re interested, why does a page flow at 60fps? , the animation preparation calculation is the calculation of getBoundingClientRect(or getComputedStyle), etc., while the 60fps element needs to be realized by the inversion animation of transform or opacity. We first set the element to the end position, simulated the start position through the transform, and then removed the reverse process of the transform, so that the browser knew the start and end positions of the animation, which reduced the amount of computation and naturally improved the smoothness.

tips

A few things to keep in mind when using FLIP:

  1. Do not exceed the user response time by 100ms. Otherwise, users will feel that your application is not immediately responsive and will pass in developmentDevToolsPay attention to that.
  2. Organize your animations carefully. If one FLIP animation is running and you want to execute the next FLIP animation, make sure that the next animation is expected to run during idle time or user reaction time so that the two animations do not affect each other.
  3. Content can be distorted. Some zooming animations can cause contortions, after all, it’s a Hack technique.

conclusion

FLIP animation is an animation mechanism and strategy that improves fluency by reversing the animation. In fact, you have used it unconsciously when writing some transition effects. This article is just a summary and optimization of it. In addition, the powerful Vue kindly provides us with two built-in components transition & Transition-Group, in which the simple animation queue of FLIP has been implemented within the transition-group for us to use. Interested partners can go to the official website to learn to use.

reference

Vue transition-group flip-your-animations Changes flip technology has brought to Web layouts