UI Designer SVG Animation Steps — Mask Animation (Part 1)

Masks are all too familiar to UI designers. Of course, they may be used more in PHOTOSHOP and less in AI, but SVG also supports masks, and they can do a lot of magic with them. I like to call mask animation a magic trick, it’s a real “smoke screen”, it only shows you what you want to see. There are two previous SVG animations where masks are used, one in the path animation (juejin.cn/post/684490… At the end of this article), using the mask’s path stroke animation, gradually draw a white spiral line, so as to dynamically display the path composed of small beans at the bottom, to achieve the effect of aircraft sowing small beans. Another time in the path distortion animation (juejin.cn/post/684490… The content of part 9), using the mask’s path deformation animation to realize the deformation animation of hollow figure. This is just the tip of the iceberg. Here are a few examples of how to use mask animation. After mastering mask animation, well, you’ll open a whole new door.

1. Basic syntax for SVG masks

Here’s a quick primer on the basic syntax of SVG masks for UI designers who don’t have an SVG base.

<mask id="shade"><circle cx="50" cy="50" r="30" /></mask>
<rect mask="url(#shade)"/>Copy the code

Indicates that I have defined a rounded shade mask with radius 30, which will be used for the rectangle. If a mask does not define any shapes, it defaults to an all-black mask, meaning that the shapes used in the mask are completely masked, and any shapes defined in the mask are drawn on the black canvas. As to in using a process, that nature is all sorts of change great, from shallow to deep below, tell slowly.

Static SVG mask

Strictly speaking, this is not a mask animation, but the animation under the mask, remember feng boss’s new film “I am not Madame Bopan” in the unique technique of expression, all the pictures are concentrated in a round window, that mask to achieve, is a white circle on the black background. Let’s simulate this effect. This is a dynamic effect of water ripples I made (the implementation method can refer to the path deformation animation previously sent).

<svg>
<style>
@keyframes deform1{0% {d:path(' '); } 100%{d:path(' '); }}/ / @keyframes deform1{0% {d:path(' '); } 100%{d:path(' '); }}/* Second path deform animation */#animate1 {animation: deform1 2s alternate infinite ; fill:#71CFD1; Opacity :0.5}/* Set opacity */
#animate2 {animation: deform2 2s alternate infinite; fill:#71CFD1; Opacity: 0.3}
</style>
<mask id="shade"><circle fill="#ffffff" cx="" cy="" r="200"/></mask><! -- Define mask --> <g mask="url(#shade)"> <! Put the morphing animation into a group and call the mask --> <path id="animate1" />
<path  id="animate2"/>
</g>Copy the code

Take a look at the results:

<path  id="animate1" />
<path  id="animate2"/>
<path d=""/ > <! -- Path of black hollow rectangle -->Copy the code

Notice the order in which the paths are stacked, top to bottom corresponding to the layers in the AI from bottom to top. That is, the browser first renders the path in the first order, and then layers it on top of each other. It’s awesome

Of course, the mask method or master, because this is the only special case. And the downside is obvious: your rectangle cannot be arbitrarily sized, only larger than the area of the covered animation. If this simple circle doesn’t capture the advantages of a mask, the following one does.

Look at the code:

<mask id="shade"><path fill="#FFFFFF" d=""/></mask>
<g mask="url(#shade)">
<path  id="animate1"/>
<path  id="animate2"/ > < / g > < g >... Some code for cup shapes is omitted here... </g>Copy the code

In fact, most of the work will be done by THE AI for us, we just need to define the animation and the relationship between the various shapes. This dynamic effect of adding water to the container, if not with the help of, then do deformation animation should be accurate calculation of the edge, and using mask, not only dynamic base drawing without fear, but also can achieve a number of different containers at the same time add water animation, as long as the mask draw several white container shape can be. With a little tweaking to take advantage of SVG, for a smorgasbord of coffee, wine, and orange juice, we can simply change the fill color of our defined morph animation and, well, that’s it.

3. Text mask

Mask is powerful, not only support graphics, but also support text, through the text mask, but also easy to realize the filling transformation of text. Such as I have done a dynamic gradient background, this in CSS 3 more easily than with SVG, but I’m lazy, with SVG implementation directly, and is one of the most unreliable method, dynamic background realization method are many, I is to let a large displacement gradient background, used SVG gradient fill can see, is this way below:

<svg width="800"  height="600" >
<style>
@keyframes animate{
0% {transform: translateX(0px) translateY(0px)}
100% {transform: translateX(-3000px) translateY(-2000px)}}
rect{animation:animate 4s alternate infinite}
</style>
<defs>
<linearGradient id="dream" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
<stop offset="0%"   stop-color="#345ca5" />
<stop offset="20%" stop-color="#6134a5" />
<stop offset="40%" stop-color="#3479a5"/>
<stop offset="60%" stop-color="#2b008b"/>
<stop offset="80%" stop-color="#3DC4D0"/>
<stop offset="100%" stop-color="#5c2392"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="3800" height="3600" fill="url(#dream)" />
</svg>Copy the code

Define a slanted linear gradient dream with 6 stops, then draw a large rectangle to use the gradient and do the bit move effect, but because the size is written down, you can only see the 800 by 600 area, thus achieving the dynamic gradient effect.

So how does this dynamic gradient apply to the text? Simple, I just need to define the text mask as follows

<mask id="shade">< span style = "max-width: 100%; clear: both; min-height: 1em; -- Text position size font fill color is defined separately --> <g mask="url(#shade)">
<rect x="0" y="0" width="3800" height="3600" fill="url(#dream)"/>
</g>Copy the code

Instead of having the dynamically gradient rectangle call the text mask directly, I have a separate one on the outside<g>Tag, because MY dynamic gradient implementation is not good, it is implemented by moving, if the mask is directly given to the rectangle, it means that the mask will run with it.

4. Mask with transparency

After seeing text masks, let’s talk about masks with transparency. SVG masks are exactly the same as those used in drawing tools. They still support transparency, gradient, whatever. I added another mask to the top of the text mask as follows:

<mask id="shade"> <text x="" y=""></ text></mask> <mask id="shade2"> <! -- A mask of gray and white rectangles --> <rect fill="# 969696" x="0" y="0" width="800" height="150"></rect>
<rect fill="#ffffff" x="0" y="150" width="800" height="300"></rect>
</mask>
<g mask="url(#shade2)"> <! --> <g mask="url(#shade)">
<rect x="0" y="0" width="3800" height="3600" fill="url(#dream)" id="aaa"/ > <! Since the new mask uses a rectangle, give the rectangle background an ID and change the CSS style. --> </g> </g>Copy the code

So what’s the effect?

5. Dynamic mask shift animation

The above are static mask applications, its role is to regenerate a window. Now, it’s time to introduce dynamic masks. SVG animations can be incredibly powerful when they are actually used. Dynamic mask and the ordinary shape of the dynamic effect is the same, nothing more than to mask effect, still from the simplest start, to a solar eclipse effect. Let’s think about animation

<svg width="800"  height="600" >
<style>
@keyframes animate{
0% {transform: translateX(0)}
100% {transform: translateX(390px)}
}
#dog{animation:animate 4s ease 2s}
</style>
<mask id="shade"> <rect x="0" y="0" width="800" height="600" fill="#FFFFFF"/><circle cx="205" cy="200" r="95" fill="# 000000" id="dog"/></mask>
<circle cx="400" cy="200"  r="100" fill="#ff7f00" mask="url(#shade)" />
</svg>Copy the code

The resulting animation looks like this

<svg width="800"  height="600"> <style> @keyframes animate1{/* define the changing background color */ 0% {fill:#c0f1ff; }
50% {fill:#1d3074; }
100% {fill:#c0f1ff; }} rect{animation:animate1 4s; fill:#c0f1ff; }
@keyframes animate2{
0% {transform: translateX(0)}
100% {transform: translateX(390px)}
}
#dog{animation:animate2 4s}
</style>
<rect width="800" height="600"/ > <! <circle cx="400" cy="200"  r="100" fill="#ff7f00"/ > <! -- Next is the complete sun --> <mask id="shade"><circle cx="400" cy="200" r="100" fill="#FFFFFF" /></mask>
<g mask="url(#shade)">
<circle cx="205" cy="200" r="95" fill="# 000000" fill-opacity="0.7" id="dog" />
</g>
</svg>Copy the code

The effect is as follows:

Writing here, I feel that I have said too much, so I will put part of it into the next chapter.