One of the front-end animations of the week: UC Browser team shows the implementation of the animations

As a person with code in his eyes, when he sees a cool effect on a web page or app, his first reaction is how it works. This series is to analyze and realize some of the animation effects that I have seen. In this paper, some of the effects analyzed and realized are only shared as an idea and used as learning materials. Without further ado, this article is the first in a series of front-end animations.

Source animation

As a mildly pseudo football fan, I often look at the scores of games such as the Premier League (Liverpool are champions). Friends who use UC should have found that the effect of UC is still very dazzling when showing the game. The animation is very simple, but the effect is really good. The renderings are as follows:

Implementation analysis

After observation, it is not difficult to find:

• The animation is left and right symmetrical, as long as one side is achieved.
• The team logo has only been moved along the X-axis, but where it stops and when it stops needs attention
• The team logo has a scale from large to small
• The transparency of the logo gradually increases

Analysis of the above four points, it will find that the effect is not complicated to achieve.

Code implementation

Animation uses CSS3 frame animation to implement animation. If you are not familiar with this property, you need to make up for it. Note the compatibility of this property. Safari and Chrome need to write -webkit-animation

We only analyze the implementation of the Manchester United logo on the left. From logo entry to animation freeze frame, we divided the whole process into four parts, and four key frames can be determined:

@-webkit-keyframes team-logo-left {}
Copy the code

Keyframe 1: The logo is doubled in size, and the X-axis is outside the form.

0% {
      -webkit-transform: translate3d(-145px, 0, 0) scale(2);
      -webkit-transform-origin: center;
      -webkit-animation-timing-function: ease-out;
      opacity: .05
   }
Copy the code

Keyframe 2: The logo is doubled, the X-axis deviates from the initial position to the middle part of the window, and a little pause is made, so 50% and 60% pause are used, and the time function is adjusted by cubic- Bezier.

50%, 60% { -webkit-transform: translate3d(76px, 0, 0) scale(2); -webkit-transform-origin: center; -webkit-animation-timing-function: cubic-bezier(.33,.95,.77, 1.01); opacity: .8 }Copy the code

Keyframe 3: The logo has returned to its normal size, the X-axis has deviated slightly to the left of its original position, and the opacity has become completely opaque.

85% {
            -webkit-transform: translate3d(-10px, 0, 0) scale(1);
            -webkit-animation-timing-function: ease-in;
            -webkit-transform-origin: center;
            opacity: 1
        }
Copy the code

Keyframe 4: From the left to the final resting position

100% {
            -webkit-transform: translate3d(0, 0, 0) scale(1);
            -webkit-transform-origin: center;
            opacity: 1
        }
Copy the code

Results show

Key points interpretation

Timer functionanimation-timing-function

• Properties can be applied throughout the animation and define how each cycle of the animation progresses over time.
• This property can also be applied to keyframes, as in this example, where each keyframe has a separate timing function. The timing function actually refers to the time function between frames, the sequence of the animation, the end of the key frame timing function does not take effect.
• The value of the property is optionallinear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n)And then there’s the step functionsteps(n,start/end)If you are interested, you can learn more about it.

Animation implementation is actually very simple, the code has been uploaded to Github, welcome to raise Issues