This is a sudden burst of inspiration in drawing (yes, occasionally there will be a moment of insight), as a designer friends, usually use the most should be Boolean operation, basic graphics add and subtract, get arbitrary shape. Let’s not say classic Apple, such as netease cloud music icon, if you directly put this, it seems nothing.



1. Preparation — Graphic layering

Every time I do SVG animation, I give myself a little time to think about how the animation will be done and what attributes will be used to achieve it. More thought, less work, or in other words, “tactical diligence is not a substitute for strategic laziness.” Let’s start with an image of the finished product, below, the adorable baby elephant










<path d="">
<circle>
process

2. Create an animation of the graphic process

In view of their own lousy general level, graphics add and subtract that set of process not to show off, or keep their own collection, here only says how to use animation performance. If you want to recall the process of creating a basic shape, is it ok to select the shape and drag the mouse on the canvas? Well, here we mainly realize the animation process of dragging the mouse? Take a look at this image (don’t tell me you’re holding Alt down, or the animation won’t work) :


@ keyframes the draw 0% {{transform: scale (0, 0); The transform - origin: left top 100%} {the transform: scale (1, 1); Transform-origin :left top}} /* Animation definition of general drawing process */Copy the code

After analysis, it is concluded that the scale deformation transform:scale() is the best solution to achieve this effect. The only thing we should pay attention to here is the base point of deformation. In the previous rotation animation, it is more defined as transform-origin:center center, which is based on the center of the circle. Here we define the top left corner, which is left top. In fact, some of the SYNTAX of CSS is really simple, entry-level English. In addition, the corresponding values of left and top are relative, which is why draw is defined as generic. In the figure below, the dashed lines are created to get all the base shapes for the body part, and the solid filled parts are the final body parts needed.

The basic figure is made up of 5 circles and 1 rectangle. I labeled it.


The < style > @ keyframes the draw 0% {{transform: scale (0, 0); The transform - origin: left top 100%} {the transform: scale (1, 1); transform-origin:left top} }#circle0{animation:draw 1s ease; fill:#414c68; }/* Base shapes are filled with solid colors */
#circle1{animation:draw 1s ease 1s backwards; }
#circle2{animation:draw 1s ease 2s backwards; }
#circle3{animation:draw 1s ease 3s backwards; }
#circle4{animation:draw 1s ease 4s backwards; }
#rect1{animation:draw 1s ease 5s backwards; }
.sketch{stroke:#c0f1ff; stroke-width:2; Fill: None}/* Use stroke */ for other shapes
</style>Copy the code

The SVG section is simplified as follows (removing attribute definitions related to shape, size and position) :

<circle id="circle0"/ > <! -- Base shape --> <g class="sketch"> <! --> <circle id="circle1" />
<circle id="circle2" />
<circle id="circle3"/>
<circle id="circle4"/>
<rect id="rect1"/>
</g>Copy the code

Animation :draw 1s ease 1s backwards; animation:draw 1s ease 1s backwards; } for example, the first 1s is the drawing time, and the second 1s is the delay time. In order for the graphics to appear in sequence, the delay time is increasing. Backwards must be defined. When we define the animation delay, we need to define the animation-fill-mode of the objects beyond the animation time. Backwards means applying the start property values before animation starts, which we define as scale(0,0). It doesn’t show, it can be both here, there’s no difference for this animation. Now look at the animation:


3. Animation of operation process

When I started doing this animation, what I thought was to mask the subtractive shapes, ok? Absolutely, but it’s too much trouble. Remember we kept it on a separate layer? That’s where it comes in, and then what about the rest of the graphics? Collective disappearance! There are a lot of ways to disappear, so I’m just going to use a mask. Disappear in order to achieve the combination of graphics and graphic appears after the operation process, necessity, and defines two animation, actually do it here, already very regret, less educated about AE, implementation in AE, but their own digging pit, also want to jump in with tears in their eyes again trying to climb out, channelled to useful ends, and bite the bullet and continue to do it. Tearfully added the following definition of animation:

# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # ##FFFFFF}
100%{fill:# 000000}}/* This is for the graphics to exit the stage */. Skip {animation:skip 1s 6s both; fill:#414c68}.combine{animation:combine 1s 6s both; }Copy the code

And:

<mask id="shade"><rect x="0" y="0" width="800" height="600" id="combine"/></mask> <! --> <g mask="url(#shade)">... </g> <path class="skip" d=""/ > <! -- Combined shape -->Copy the code


is to put all the shapes together again after using this mask. The only good news is that skip and Combine animations can be reused. Opacity :0, opacity:0, opacity:0, opacity:0, opacity:0, opacity:0, opacity:0, opacity:0 So even if the opacity is zero, it will be treated as black. If necessary, use two layers of mask, one with a black opacity change and one with a white solid background. I’ll just take a look at that part of the animation:


The rest of the work is manual work uh, you need to add the head animations and the tail animations, nothing special, just make sure the lag time is correct, I won’t talk about it here. The resulting unified animation looks like this:


4. Color filling process

The process of color filling has nothing to do with the process of drawing animation, just to look good! Nice! What else can I say? I don’t have any idea how to show a perfect gradient fill, so I use a mask. I first mask the filled shapes so that you can’t see them, and then at the appropriate time, the mask gradually moves to reveal the filled colors. To make the mask look more natural, I filled the mask with gradients. The illustration is as follows:

<defs>
<linearGradient id="gradient3"  x1="0" y1="0" x2="0" y2="600">
  <stop offset="0" stop-color="#ffffff"/>
  <stop offset="0.1" stop-color="# 000000"/> </linearGradient> </defs> <! -- Defined gradient type -->Copy the code

The final result is as follows:

Also, tell yourself, don’t do this kind of hard but not cool effect again.