Last: juejin. Cn/post / 684490… Medium-length: juejin. Cn/post / 684490…
In the previous two articles, although the complete description of the deformation animation of arbitrary graphics implementation method, but the biggest limitation is obvious, that is, a graph is transformed into another graph, so if it is a change more or a change how to achieve? Here’s how to solve the problem.
8. Deformation animation of graphics between different numbers
To illustrate the simplest example, I want to make an animation effect of a drop of water splitting into two drops of water, the fission process is undoubtedly a deformation process of graphics. But what happens when fission then splits into two? This is our first priority. Let’s talk about the various implementation ideas and then compare them.
8.1 Method 1 — Split Method (Disconnecting path)
As we said earlier with scissors disconnect anchor point, make a closed path into open path, so clever stylist friend can think of, since can disconnect an anchor point, then you can disconnect a again, make a path into two paths, two paths respectively their own animation effects, in other words, is half a small water droplets into a small water droplets deformation animation, As shown in the figure below
The starting and ending points do not coincide, so the number of anchors +1= the number of paths
The place where you break the path is to stagger the start and end points a bit
<path>
<svg>
<style>
@keyframes deform1{
0% {d:path(' '); } /* drop path */ 100% {d:path(' '); } @keyframes deform2{0% {d:path(' '); } /* Drop path */ 100% {d:path(' '); } /* The path of the right droplet after deformation */}#animate1 {animation: deform1 2s ease; }
#animate2 {animation: deform2 2s ease; }
</style>
<path id="animate1"/>
<path id="animate2"/>
</svg>Copy the codeSo let’s see how this implementation works out
Although it seems that 1 has changed into 2 on the surface, the process of splitting into two is extremely stiff. The main reason is that our way of realizing is from half a water drop to one water drop, so the animation process completely reproduces our way of thinking.
8.2 Method 2 — Overlapping method (” One change one “+” one change one “)
The effect of the above method is not good, and imagine that this is to become two, then if it is to become three, four, before the deformation of the graph cut into thin pieces…… Since the first two of us are one change one implementation method, then we might as well be flexible, for example, before the deformation of water droplets actually have two completely overlapping graphics, one into the left, one into the right. The implementation idea is as follows:
Although the drops overlap, the original path directions for the left and right bends must be opposite, otherwise you will get the following effect:
Don’t kill this method at first, because the shape of the shape before and after the deformation does not change, it will produce the displacement effect, if it is to make a circle into two water droplets, the deformation effect is still there, as follows:
“Smoke screen”
It’s not happy at all, and it exposes the truth we’re trying to hide. Of course, method 2 is not optimal, but it works in some situations. But here’s what we came up with.
8.3 Method 3 — Splicing (Find the critical point for fission)
This method is a combination of method 1 and method 2, our method 1 is the original shape being cut in half, then this method is that we find deformation graphics in two after a moment, such as effect on the deformation, deformation after water droplets are two still connected at the moment of this time, is still a graphics, animation is decomposed into two stages, the first stage, the try, The second stage, a sharp cut. But in a moment, the use of “smoke screen”, to achieve a perfect splicing of the two processes. So what we’re going to do is we’re going to use the path finder in AI to merge the two shapes of the critical point. Let me draw a picture of it
<svg>
<style>
@keyframes deform1{
0% {d:path(' '); } /* original droplet */ 100% {d:path(' '); } @keyframes deform2{0% {d:path(' '); } /* Overlap effect left droplet */ 100% {d:path(' '); } @keyframes deform3{0% {d:path();' '); } /* Overlap effect right droplet */ 100% {d:path(' '); } /* Drop to the right after moving position */Animate1 {animation: deform1 1.5s Cubic bezier(0.8, 0, 0.85,0.5); }
Animate2 {animation: deForm2 0.5s Cubic bezier(0.15, 0.5, 0.2, 1) 1.5s; }
Animate3 {animation: deForm3 0.5s Cubic bezier(0.15, 0.5, 0.2, 1) 1.5s; }
</style>
<path id="animate1"/>
<path id="animate2"/>
<path id="animate3"/>
</svg>Copy the codeTo explain briefly, I split the animation effect of 2S into two parts. The former part has a deformation effect of 1.5s, and the second part has a displacement of 0.5s. However, the execution should be delayed 1.5s to achieve seamless timing. I changed the motion rate because ease means slow-fast-slow. If this motion rate is used for all the concatenation animations, the whole process would be slow-fast-slow-slow-slow-slow-slow. There would be a noticeable pause at the critical point, so I modified the motion rate to eliminate the pause effect. The predefined values were originally used, and the deformation animation was ease-in and the displacement animation was ease-out. However, I found that the connection part was still not smooth enough, so I simply rewrote the speed curve by myself, saying that it was scary. After mastering the method, it was actually very simple, so I can use this case to say:
Here’s how it works:
In summary, we didn’t use method 3 directly from the beginning, because method 3 takes the longest time. In fact, we need the simplest method to achieve the ideal effect as much as possible. Therefore, in some scenarios, it is better to use method 1 and method 2 (especially convenient). For the graph of method 3, which seeks critical point, it is more suitable for fine production.
Tip: because this kind of shape and position of deformation animation involves more, in order to facilitate their view SVG code that actually show the color value of information being defined in the CSS style, so suggest drawing defined as convenient color recognition, or built in different layers, export of SVG (AI will be grouped according to different layer).
9. Deformation animation of hollow figure
Up to this point, we’ve got infinite morphing effects, fission, combos, and fun. But there is a common figure, need to say separately to achieve deformation animation method, is the following kind of hollow out graphics, this case is from a key into a lock, only need this case as a basis, after mastering the method, all in all, the original picture is as follows:
Without keyholes and keyholes, this morphing animation is extremely simple to implement, but with more holes, it seems a bit tricky, so let’s take a look at the d-value of the graphics. Because the case graph is too complicated, we’ll start with the simplest one.
Subtract the underlying shape
10. Morphing animations using morphing masks
Let’s try using the mask I mentioned earlier. UI designers are no strangers to masks, the principle of SVG masks is the same, I used a black mask for the hollow parts to achieve the same effect. The idea is as follows: the animation is divided into two parts, one part is the deformation animation of the figure without hollow part, and the other part I attach the deformation animation to the black part of the mask, which is the area we want to hollow out.
<svg>
<style>
@keyframes deform1{
0% {d:path(' '); {d:path();}' '); } @keyframes deform2{0% {d:path(' '); }/* mask black */ 100% {d:path(' '); /* Black mask */}}#animate1 {animation: deform1 3s ease; } / *Base deformation animation */#animate2 {animation: deform2 3s ease ; fill:#000000; } / *</style> <mask id="hollow"><rect x="0" y="0" fill="#ffffff" width="" height=""/><path id="animate2"/></mask><! <path id= -- define a white rectangle with black as the mask of the morphing animation"animate1" mask="url(#hollow)"/ > <! Add a mask to the base deformation animation --> </ SVG >Copy the codeUI designers who don’t have any SVG mask base at this point might be nervous, but we’d love to know because mask animations are powerful and we’ll have a separate topic later. Take a look at the animation effect of using mask deformation combined with base deformation:
As mentioned earlier, it is more freedom to define the mask animation separately. For example, IF I add another 50% keyframe to the mask morphing animation, and then reduce it to a tiny point, the animation will look like this:
12. Conversion of path curve values
We have said to the operation of the graphics are part of the anchor lever handle, I’ve always wanted to avoid this part, mainly considering the UI designer after all more familiar to the AI software, more convenient to operate, but I do in case of actual operating process, found that in the case of anchor is less well, find the corresponding path can also find the smooth, In the above key and lock deformation animation (20 anchor points), even though some curves do not start with small C can be seen from the D value, it is really difficult to count them. Therefore, by adding this extra part, we can directly change the D value to achieve the same method of converting into small C curve. Only say method, do not say principle.
12.1 Little S → little C
First, let’s talk about small S, which is most likely to appear. Designers who have seen the last chapter already know that the method to produce small S is to drag the transition point directly, and there are only four values behind S. The transformation method is as follows: SA,B,C,D←→ C the penultimate number of the previous group minus the penultimate number of the previous group minus the penultimate number of the previous group,A,B,C,D ah ah ah, dizzy, right? This is only A normal group of curves starting with A small C conversion formula, so unless you only have A very few small S, you are doing A lot of damage.
12.2 Small L → small C
Designers must keep their eyes open because the small L looks a lot like the number 1, but remember that our d value only supports one decimal digit, and when something like 3.51 appears, it’s 3.5 and the small L. Little L is the command to draw A line, followed by only two values. The conversion method is as follows: lA,B←→c0,0,A,B,A,B are preceded by two zeros, followed by copying A set of two values followed by little L. Small L and small S are the most common. The following two cases are less common. It is suggested to change the graph.
12.3 Little H → Little C
H is the horizontal line drawing command followed by only one value. The conversion method is as follows: hA←→c0,0,A, the last value of little C of the previous path curve,A, the last value of little C of the previous path curve
12.4 Small V → small C
V is the vertical straight line drawing command, the same as above, the conversion method is as follows: vA←→ C0,0, the penultimate value of small C of the previous group of path curves,A, the penultimate value of small C of the previous group of path curves,A look, honest not to deceive you, so in order not to create difficulties for yourself, slightly move the anchor point, not so horizontal and vertical straight. There are also cases where absolute positioning begins with a capital letter, which translates, well, I can’t accept manual calculations without tools. Sauce. With the help of the formula, incidentally do an animation effect to see.
d:path('the M60, 490, c0, 0,50,0,50,0, c0, 0100,0,100,0, c0, 0,50,0,50,0, c0, 0,50,0,50,0, c0, 0,50,0,50,0, c0, 0,50,0,50,0')Copy the codeThat’s the advantage of relative coordinates. C0,0,50,0,50,0, represents a horizontal line of width 50, corresponding to the six curves of the mushroom. Repeat it six times.
13. About adding virtual curves
And a straight line into birds and fish, oh, not birds, fat birds. Use the previous knowledge point as an opportunity to talk again. Incidentally bring out the bottom of the box skills, virtual curve. I’ll keep you in suspense.
Virtual curves c0,0,0,0,0,0
d:path('M40, 130, c0, 0,0,0,0,0 c0, 0,0,0,0,0 c0, 0,0,0,0,0 c0, 0,0,280,0,280');Copy the codeIn fact, this effect is the same as
d:path(',0,280,0,280 M40, 130, c0, 0 ');Copy the codeIt’s the same thing, we’re just tricking the browser into making some nonexistent curves to make up for the difference in the number of curves before and after the distortion. The animation can be divided into two parts and joined together, or it can be completed in an animation like me. Because the curve of the little fat bird is the most in the end, I added 8 virtual curves to the straight line and 5 to the small fish (all put in the position of the fish mouth), and then see the effect
Do you feel too easy, and angrily point out, why at the end of this easy to use method? ! Do not dry, the reason is very simple, the anchor point is to make the deformation process become uniform. For example, if I change my bird into a fish by adding scattered anchor points, the effect will look like this:
d:path('the M60, 490 c0, 0150,0,150,0 c0, 0150,0,150,0')Copy the codeThen, the four virtual curves that need to be added are inserted into the center, which is behind the first path.
d:path('the M60, 490 c0, 0150,0,150,0 c0, 0,0,0,0,0 c0, 0,0,0,0,0 c0, 0,0,0,0,0 c0, 0,0,0,0,0 c0, 0150,0,150,0')Copy the codeOk, let’s see if it’s a mushroom growing from the center:
14. Use path deformation animation to achieve “stroke” animation
The SVG stroke animation effect was described in another article. It can still be done using a path distortion animation, but this is a “pseudo-stroke” that is more like radiating from a point. Take a look at this animation below:
<svg>
<style>
@keyframes deform1{
0% {d:path(' '); } /* virtual point before flowering */ 100% {d:path(' '); } @keyframes deform2{0% {d:path(' '); }/* virtual point of left leaf */ 100% {d:path(' '); } @keyframes deform3{0% {d:path(' '); }/* virtual point on the right side of the leaf */ 100% {d:path(' '); } @keyframes deform4{0% {d:path(' '); }/* virtual point */ 100% {d:path(' '); }/* Flower curve path */#animate1 {animation: deform1 1s ease forwards; }/* Long stems for 1s, forwards indicates that the animation state is kept at the end */
#animate2 {animation: deform2 1s ease 1s forwards; }/* The time to grow the left leaf is 1s, and the delay (i.e. the stem animation time) is 1s. */
#animate3 {animation: deform3 1s ease 2s forwards; }/* The time to grow the right leaf is 1s, and the delay is 2s (i.e. the stem + the animation time of the left leaf) */
#animate4 {animation: deform4 1s ease 3s forwards; }/* Flowering time 1s, delay 3s (i.e. stem + left + right leaf animation time) start */
</style>
<path id="animate1"/>
<path id="animate2"/>
<path id="animate3"/>
<path id="animate4"/>
</svg>Copy the codeHere provides another conversion method, is about the absolute position of large C draw path. If you export a d value with a curve starting with a big C, there is no need to adjust the path for this distortion through virtual points. C0,0,0,0,0 is the same thing as CX1,Y1,X1,Y1,X1,Y1. X1 and Y1 are the coordinates of your starting point M. How to draw the Bezier curve of SVG path?
In the actual use process, we must grasp the idea is to use the simplest way to achieve dynamic effect as far as possible. We have started to prepare to write an article on SVG micro effect. After all, the animation realized by SVG combined with CSS3 cannot be compared with real animation production software, and the most applied scenes should be some micro effect. As an advanced part of deformation animation, this article involves miscellaneous knowledge points, including the definition of the critical point of the Mosaic animation and the method to achieve seamless stitching of the custom rate curve, the realization of deformation animation combined with mask deformation animation, the transformation of non-small C path curve, and the addition of virtual curve. Metamorphosis animation complete end. Leave a message if you have any questions.