The preparatory work
To make it easier to understand, before we start, we need to agree on four things.
The four points of consensus are
Rap and dance and play basketball
. Ahem ahem sorry, I’m off topic
Here it really begins:
1. The transition and animation
Let’s recall how animation was used:
(1) the transition
.foo { width: 100px; trantions: 1s; } .foo:hover { width: 120px; }Copy the codeSet the element to two different states and transition times.
When we trigger the change, the browser sees the style change and creates an animation for us
(2) the animation
@keyframes cardaniIn {0%, 39%, 100% {-webkit-animation-timing-function: cubic-bezier(1, 0, 0.47, 1); Animation-timing -function: cubic-bezier(1, 0, 0.47, 1); } 0% {-webkit-transform: rotateY(0deg) scale(0.8) translate3D (0, 0, 0); Transformatey (0DEg) Scale (0.8) Translate3D (0, 0, 0); } -webkit-transform: rotateY(0deg) scale(0.8) translate3D (0, -50px, 0); Transform: rotateY(0DEg) Scale (0.8) translate3D (0, -50px, 0); } 100% { -webkit-transform: rotateY(180deg) scale(1) translate3d(0, 0, 0); transform: rotateY(180deg) scale(1) translate3d(0, 0, 0); }}Copy the code
Animation allows us to write multiple state values, unlocking the ability to tell the browser multiple state changes at once.
The common denominator is,
Tell the browser what style we want and let the browser see the change.
Browsers don’t see things the same way we do,
Browsers have a lot of frames in a second, and they do a lot of things with each frame,
These include changes in computing style,
Between 2 frames
When the style of an element is different because of our modification, the browser sees the change and creates an animation.
The first thing we need to agree on is:
When we create an animation, we’re actually telling the browser how the element style changes from frame to frame.
2. Use only transform and opacity for animations as much as possible
Browser 1S has a lot of frames, and the browser does a lot of work on each frame.
The two most time-consuming tasks are layout relayout and paint.
Transform and opacity only trigger this step of composite synthesis,
Understanding this is key to creating smooth animations
The second thing we need to agree on is:
Use only transform and opacity for animations
3. The display and visibility
display:none; And the visibility: hidden; Will make the element invisible,
(1) display: none; Invisible, does not take up space, and more completely, moves elements from the Render Tree, causing a rearrangement.
(2) visibility: hidden; Make elements visually invisible and unclickable. But still occupy the space, can obtain the location and other related information, switching the visibility will not occur rearrangement.
So in certain situations, such as in the animation we are going to write (we will say below that the element needs to be invisible, but the location information is needed), use visibility: hidden; To hide elements.
The third thing we need to agree on is:
Consider using visibility to control the visibility of elements
6. 996 stress can make math and memory skills worse
FLIP
Let’s get started
We divided the animation into two parts. The first part, the overall position and size changes
Remember our number one agreement,
When we create an animation, we’re actually telling the browser how the element style changes from frame to frame.
Now again, the animation includes the width, height and position changes, and we need to tell the browser the width offsetTop offsetLeft for the two frames
FISRT
Gets the style of the first frame
var fisrtDom = params.fisrtDom;
var fisrtReact = fisrtDom.getBoundingClientRect();
console.log( fisrtReact )
Copy the code
LAST
Gets the style of the last frame
var lastDom = params.lastDom;
var lastReact = lastDom.getBoundingClientRect();
console.log( lastReact );
Copy the code
Invert
Now let’s calculate the difference between the two states and apply the difference to the element we want to animate.
Remember our agreement number two and three,
Transform is used for animation, and visibility is used for element visibility
So we use transform and visibility for the element.
play
Finally, let it work.
When we cancel the transform value, the element’s transform will go back to the default translate3d(0,0,0) scalce(1),
The browser sees the style change and the transtion creates the animation for us.
In fact, it’s a technology called FLIP.
First (first frame) L (last frame) I (reverse) P (play)
Specifically for creating this kind of animation
The second part of the animation is relatively simple, and I leave it to you to play freely.
web Animations Api
There is an Api called the Web Animations Api that can be very helpful in creating Animations,
It allows us to create animations programmatically.
In our example, we can use it like this
The best thing about the Web Animations Api is that you can save instances of Animations,
We don’t have to calculate it again when we do the pack up animation.
Just animateinstance.reverse () can play the animation backwards.
The Web Animations Api is not the focus of this article; take a look for yourself at the plugins that are compatible with the lower version of poyFill.
The resources
Performance optimization developers. Google. Cn/web/fundame…
CSS animations ten things you should know about www.yuque.com/cssconf/5th…
FLIP the www.w3cplus.com/animation/h…
FLIP the www.w3cplus.com/javascript/…
. .
Although the animation was completed, due to my personal ability and the progress of the project,
I’m no longer allowed to work on routing and sharing pages, unfortunately not in the formal environment
Xin Sai, in order not to delay the progress of the project, every day get up an hour earlier to write this thing, or abortion. Later, I can pick it up again when I’m free
. .
This is not a rigorous tutorial, but more of a personal summary and sharing,
There may be mistakes and omissions in the article, please forgive me, as a reference.
Add coco QQ group 418766876, exchange ducks together…
Apple’s animation is so delicate and exquisite.
