Author: @Wnagly19. This article has been authorized to the public account of the Community of Gold Diggers for exclusive use, including but not limited to editing, marking the original rights and other rights.

🎈 profile

When using the mobile phone, will more or less will be exposed to the use of transition animation scene. Switching from the most basic page to the normal application scene after the click of a button is animated. These animations are constantly optimising (fooling) our brains, reinforcing our perception of a particular event. Different animations in different situations can virtually guide the user to the next action. And give the brain time to interact.

Transition animations play a very clever role in our daily development. In fact, most front ends do not understand the concept of interaction and coordination between transition animations. On the basis of no interaction designer, they can only give an approximate execution time and linear speed of the animation through the intuitive impression of the brain. However, this is often due to the deviation of personal senses, which leads to the loss of kinetic value.

🪁 Kinetic value

So in terms of Ant Motion’s kinetic value, why do we animate?

According to them, the value of kinetic effects should be something like this:

  • Increase experience comfort: make the user’s cognitive process more natural.

  • ** Increase the interface vitality: ** Attract attention in the first time and highlight the key points.

  • ** Describe hierarchical relationships: ** represent hierarchical and spatial relationships between elements.

  • ** Provide feedback and clear intentions: ** facilitate interactive experience.

People are always curious, and they are often willing to accept some bold innovations. In the case of ensuring that there is no obstacle to the human brain, a good transition animation is the most direct sense for users to experience the product. Compared with the products without animation, the two can be said to be a miss or a thousand thousand.

You can try to turn off and on the animation of the phone for a short time to have a direct sense.

The dynamic experience must be smooth, and the value of the experience can be better without affecting the performance of the experience. Using a lot of meaningless animation to cause the product to be stuck is actually a failure. (Basic operations of third-rate products)

⚡ Animation world in CSS

We’ve seen a lot of magic in CSS, but it’s all the trickery of animations. So, we should take a hard look at how Transition and Animation do some magic.

Animation cycle

Animation cycle is the core point of animation, it is based on the time and Cubic bezier curve characteristics of the corresponding combination, produce visual effects.

Similarly, both timing and linear animation are difficult aspects of animation design, and most of the time, animation should be done more efficiently. Check out Ant Design’s suggestions for animations.

In enterprise application design, dynamic efficiency needs to effectively complete the transition in the shortest possible time. So how to grasp the length of time? According to Davina Bristow, founder of Neurology at City College London, blinking is the fastest subconscious action the human body can perform. Most people blink 15 times per minute, and the average blink lasts between 100 and 150 milliseconds. So we define this time period as the basic time unit of Ant Design action.

The following images show some of the transition’s default bezier curve animations.

(Renderings from Google Browser Cubic Bezier Editor)

Fast and Furious

In Ant-Design, the Design of the control is very thoughtful, and the careful control makes the animation look just right. Take a look at this image:

The basic time units in the Ant-Design component are: maximum time: 100ms, basic time: 200ms, large time: 300ms… So based on this, I compared other UI component libraries and concluded that some animations are more reasonable time control degree. I will share it here.

$animation-time-fast: .1s;
$animation-time-base: .2s;
$animation-time-even: .3s;
$animation-time-slow: .4s;
$animation-time-cut: .7s;
Copy the code

🚞 The life of a cube

In web pages, we have the familiar box model, all the pages are made up of large and small boxes. Here is a basic box model.

Therefore, for animation, the most intuitive is the use of some interaction with the block. We can divide it into several different types of interactions:

  • ** Single element animation animation: ** This animation is triggered independently throughout the page, called a single element animation.
  • ** Interactive animation: ** Animation involving a sequence of possible occurrences between multiple elements is called interactive animation.
  • ** Transitions: ** transitions between pages, called transitions.

presentation

In CSS, there are two apis for animation generation, Transition and Animation, both of which may define transition animations. But the difference is big. Transition can only declare the relationship between the beginning and end of an element change. An animation is free to define the beginning and end of an animation on an element. Even more, you can control the number of times the animation is executed.

A single point of element

Let’s start with a single element (single point) animation:

This is a picture of a common acoustic signal, and it’s very simple to implement,

.dot {
    position: relative;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: #1890ff;

    &::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: inherit;
      border-radius: inherit;
      // animation: scale 2s ease-out infinite;
      transition: all 1s;
    }
    &:hover::before {
    transform: scale(3);
    }
Copy the code

At this time, we have clearly found the disadvantages of Transition. It cannot freely control the deformation of elements, and all the deformation is pre-set on the elements, while animation can freely organize the content and number of changes of elements, without completely depending on the user trigger.

Note that CSS animations and transition properties have no effect on the element if it disappears directly from the document stream. Such as: the display

It can be seen that the existence of transition is mainly used for the transition behavior of elements. When the transition behavior of elements occurs, we do not need to use animation to control the relatively simple animation. Therefore, it can be concluded that:

  • Transition: Emphasizes the transition effect of a single animation property, starting from the beginning to the end, there is no animation transition in between.
  • animation: emphasizes the combination of various animation attributes that can effectively align the execution time of the animationDo STHThe process from start to finish can be simple or complex. atransitionAn enhanced version of.

Interactive animation

In the Web page, we often involve a lot of interactive animation, we may involve part of the animation interspersed, then this time it is necessary to animation elements for a part of the delay operation.

Note that the animation-delay element is still displayed, the following is just a basic demonstration, and the full effect can be seen in another article, which is done entirely by delaying the DOM.

Comparing the two demos, the one on the left uses the Vue hook to add setTimeout batch to control the behavior of the animation, and the one on the right uses the animation-delay to set the basic delay time. You can see that the animation is only delayed, but the DOM is still loaded, which obviously has some flaws.

Example animation from @mmdjj: Graceful V-for List Loading Animation: VUE Animation Hook Practice

⭐ Using animation

Sure, Vue provides transition-group and Transition components that control the entire life of a card, from entering to leaving, but in terms of animation behavior, it’s written as an animation.scss for basic animation management. Specific can be based on the current need of animation, put together into the corresponding animation class.

When writing animation class, we need to pay attention to is that an animation without accident, must be two-way, such as the most familiar fade in and out. Fade in and fade out is actually a process of beginning and ending the opposite.

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1; }}@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0; }}Copy the code

Most of the time, we just need to make a reference to the class in the class. If the transition component is needed for vue.js, we can throw together an animation state class for binding.

🍻 Animation sharing and reading resources

Below to share the title of the animation resources, do not take out some resources estimated today is difficult to get out of the nuggets. First of all, some articles by recommended authors, very good, read the concept section and then look at the practice, straight off.

  • Ant Motion Design animation share
  • Chokcoco: CSS fancy border animations
  • MMDJJ: Graceful V-for list loading animation: VUE animation hook practice
  • Alphardex: My usual CSS routines
  • GSAP professional front end Web animation library

The following is my personal feel better animation resources, written a SCSS file to everyone, not as happy alone.

Animation style download address: download now

conclusion

This article is my a little summary for transition animation system, looks very simple transition animations, difficult instead of API design animation process, in a team, the design and the experience of interaction for the front-end is also a top priority, we in the development, knowledge of other areas should keep learning attitude. Similarly, for some complex animations, communication with interaction design is also necessary if not necessary. Good animations can give people a bright visual experience, while sluggish animations can also make people tired. After reading this article, try it on your own project.

Imperceptibly write articles have been nearly two o ‘clock, adhere to the writing is not easy, no group, no public number, only in the nugget published articles. After reading the article, I hope you can help me with a little. The Nugget 2020 annual author list has been released. If you have a spare ticket, you can vote for wangly19.

Voting address: vote immediately, you can also click on my profile picture, enter the details, click on the annual list can also oh.