A loading icon was used in a recent project. So much SVG+CSS3 animation has been done, and there are few opportunities to be really applied in the project. Therefore, I should seize every opportunity, even if loading is not enough. It would be a disgrace to my cultivation this year to use the system with its own chrysanthemum. In finally made of perfect process, solves the two problems, first of all, is a coarse cross paths of stroke such as animation, second, is infinite loop problem of multiple splicing animation, which troubled for a long time, so, when the problem solving, eager to share, is advantageous for the designers of other laugh it off, in case of pit is the cause of this article.

1. If it’s just a simple stroke animation

Yeah, I mean if only if. So let’s look at the dynamic effects that we want to achieve.

stroke-dashoffset
Poke here, poke here
stroke-linecap
stroke-linejoin
stroke-width

Ok, don’t say someone else’s logo stroke dynamic effect is more easy to achieve, let’s analyze the current case, where is the difficulty? Nonlinear folks. If the icon looks like this:

Easy is not easy, you say easy is not easy! Of course, let the father of party A change icon is not realistic, if the compromise to do a divinity is not like the version of that is not as chrysanthemum (to do art for a long time, no point obsessive-compulsive disorder is really not). From now on, I still have the ability to find solutions, break through and analyze problems. The solution I came up with was a universal mask. Masks are a great thing to cover up anything you don’t want to see, so just mask the path stroke animation.

2. If only the stroke animation whose paths do not overlap

Yeah, I mean if only if. For example, it would have been much easier if there had been a logo like this. What is this? God knows, I just made an unequal stroke.

Then come to see the real case, ready, hit the face (~ ε(#￣)☆╰╮(~ ▽ //). The effect is like this!!

In fact, it is also pretty easy to understand, mainly the intersection part out of the problem. When the first stroke animation passes by the intersection, the width of the stroke is already shown through the mask.

3. Come on, solve the problem

Of course, this trifling difficulty will not make me give up. If you get tangled up at the intersection, cut the tangle and cut the path open.

Each paragraph does its job. Define the time delay. Ok. Simple paste point code to make up the word count, CSS part

/* Define a unified animation property that changes the stroke-dashoffset value */ @keyframes dash{to {stroke-dashoffset: 0; } } @keyframes dash{ #MH_Path1{ stroke-dasharray:705; /* 705 is the length of the first segment path */ stroke-dashoffset:705; Animation: Dash 0.7s Linear forward; /* 0s start, last 0.7s*/} #MH_Path2{stroke-dasharray:645; /* 645 is the length of the second segment path */ stroke-dashoffset:645; Animation: Dash 0.6s Linear 0.7s forwards; /* Delay 0.7s start, last 0.6s*/} #MH_Path3{stroke-dasharray:108; /* 108 is the length of the third segment path */ stroke-dashoffset:108; Animation: Dash 0.1s Linear 1.3s forwards; /* Delay starts 1.3s, lasts 0.1s*/}Copy the code

For the DOM part, since the three-part mask is reused once as a light gray logo base (or you can export the path separately, but that’s not optimal), I use

to define the three-part figure.

<symbol id="logo1"> <path d="" /> <! - d value corresponding to the first part of the path of the mask - > < / symbol > < symbol id = "logo2" > < path d = "" / > <! - d values corresponding to the second part of the path of the mask - > < / symbol > < symbol id = "logo3" > < path d = "" / > <! The -d value corresponds to the path of the third mask --> </symbol> <! Define a three-part mask, Use tags to reference -- > < mask id = "MH1" > < use xlink: href = "# logo1" / > < / mask > < mask id = "MH2" > < use xlink: href = "# logo2" / > < / mask > < mask id="MH3"><use xlink:href="#logo3" /></mask> <! <g fill="#ede8e6"> <use xlink:href="#logo2" /> <use xlink:href="#logo2" /> <use xlink:href="#logo3" /> </g> <path mask="url(#MH1)" id="MH_Path1" d="" /> <! D value corresponding to the first paragraph segmentation path -- -- > < path mask = "url (# MH2)" id = "MH_Path2" d = "" / > <! D value corresponding to the second paragraph segmentation path -- -- > < path mask = "url (# MH3)" id = "MH_Path3" d = "" / > <! -d value corresponds to the third segment path -->Copy the code

After cutting the path and mask, we get the loading logo of the semi-finished product below.

4. Maybe this is the real dry stuff

It seems that there is no problem, mask Mosaic + path Mosaic, the intersections problem has been solved. But this is just SVG+CSS3 dynamic effect of live learning, such a case casually take a can be analyzed, not enough to write.

Loading icon is completed, but just done,not perfect. As we all know, the loading time is not controllable, so after finishing a stroke animation, it should theoretically start the next round. The animation has an property called animation-rotund-count, which is the number of times the animation is played. For example, the chrysanthemum icon that we rotate around in circles is usually defined as infinite. It’s an infinite loop. So in this case, what’s the problem?

Going back to our definition of stroke animation properties, I’ll take the most representative second paragraph as an example: animation: Dash 0.6s Linear 0.7s forwards. 0.7s behind is the start of animation delay. During the seamless stitching, the start of the second stroke animation is the start of the first animation. This command is executed once by default. So, let’s see what the animation looks like when we add the property value of this infinite loop.

It looks messy, because each segment being cut is executing its own loop individually. Yes, the animation can be executed an infinite number of times, but the delay can only be executed once, and there is no special property controlling the delay to be executed before each loop starts. At least not yet, but CSS3 might consider adding a new specification (again, wake up). The bubble that controls the infinite loop through the most commonly used property has burst, but is the problem unsolvable? (Nonsense again, what’s the point of this article without a solution?)

Now let’s think about how to control the delay time, besides writing the time value directly in the animation property. That’s right, @keyframes. From now on, in order for the infinite property to work, my three parts of the animation no longer have any delay and share the same total animation time. Instead, I control the start and finish times via @keyframes. Take a look at this chart to help you understand:

Next, I will control the time interval of each animation by controlling the time node of @keyframes. As for why 45% and 90% are selected as nodes, I just estimated the proportion of time of each animation for easy calculation. I designed the entire animation cycle to 2s, leaving the DOM part unchanged, but the CSS part completely redefined. First, the generic setting of the animation property to change the stroke-Dashoffset value is no longer useful because instead of executing from 0% to 100%, it breaks, and the exact method of breaking varies from part to part.

@keyframes MH_Path1{ 0%{stroke-dashoffset:705; } 45%, 100%{stroke-dashoffset: 0; }} /* 0s start, duration 0.9s, 1.1s delay */ #MH_Path1{stroke-dasharray:705; animation: MH_Path1 2s linear both infinite; } @keyframes MH_Path2{ 0%, 45% {stroke-dashoffset: 645; } 90%, 100%{stroke-dashoffset: 0; }} /* start at 0.9s, last 0.9s,0.2s delay */ #MH_Path2{stroke-dasharray:645; animation: MH_Path2 2s linear both infinite; } @keyframes MH_Path3{ 0%, 90% {stroke-dashoffset: 108; } 100%{stroke-dashoffset: 0; }} /* 1.8s start, last 0.2s*/ #MH_Path3{stroke-dasharray:108; animation: MH_Path3 2s linear both infinite; }Copy the code

In the first path, I performed the entire stroke animation at 45%, and in the rest, from 45% to 100%, there was no change, so the delay time naturally generated, corresponding to the definition 45%, 100%{stroke-dashoffset:0; }; The second paragraph needs to control both the beginning and the end, and the third paragraph only needs to control the start time.

It’s time to test the effects:

If the entire animation needs to be delayed, it is much easier. Just write the time needed to be delayed in each animation property. The three are not separated, the same definition, perfect sharing.

In the process of doing this case, the biggest gain is through the definition of keyframes to achieve multiple spliced animation (or known as delayed animation) infinite loop problem, so, you last!

Codepen preview is here, poke, poke