UI Designer SVG Animation Steps – Mask Animation (part 2)

Continue to last

6. Dynamic mask displacement of the scanning effect

This is a small improvement at the end of the previous chapter, and it is taken out separately, because this effect uses a lot of scenes, the key is simple, first look at the schematic diagram.

<svg  width="800"  height="600" >
<style>
@keyframes animate{
0% {transform: translateX(0)}
100% {transform: translateX(800px)}
}
#scan{animation:animate 4s ease alternate infinite}
text{mask:url(#shade); text-anchor:middle; }
</style>
<mask id="shade"><circle cx="- 40" cy="130" r="40" fill="#ffffff" id="scan"/></mask>
<text x="400" y="150">Vincent Willem Van Gogh</text>
</svg>Copy the code

This time, I put the text application mask in the CSS mask: URL (#shade) has the same effect.

<radialGradient id="glow" fx="50%" fy="50%" cx="50%" cy="50%" r="50%"> 
<stop offset="80%" stop-opacity="0"/> 
<stop offset="80%" stop-color="#ffd800" stop-opacity="0.8"/> 
<stop offset="100%" stop-color="#ffd800" stop-opacity="0" /> 
</radialGradient>Copy the code

I can also do external glow, but the edges are too serrated, so I changed it by placing a solid circle on top of a gradient circle. Here there is no other need to pay attention to, mainly the shape of the upper and lower order clear line, I use code to explain:

<rect x="0" y="0" width="800" height="400"/ > <! -- Black rectangle background --> <g id="scan"> <! -- Moving outer glow & lightened background circles --> <circle cx="- 40" cy="130" r="55"   fill="url(#glow)" />
<circle cx="- 40" cy="130" r="40"   fill="# 322518" />
</g>
<text x="400" y="150">Vincent Willem Van Gogh</text><! -- Masked text -->Copy the code

The browser first renders the black background, then moves the circular glowing area in turn, and finally synchronizes the text.

steps()

accumlate:sum
animation:animate 4s steps(7,start)
letter-spacing

@keyframes animate{
0%{transform: translateX(0)}
100%{transform: translateX(700px)}
}
#scan{animation:animate 4s steps(7, start)}Copy the code

The explanation is very simple, the entire animation is divided into 7 segments, no tween effects.

7. Dynamic mask deformation animation

Using the mask after morphing animation is basically unblocked, just say a simple application, see how powerful it is. I want to make a fan with an increasing Angle. We know that the circle doesn’t allow you to define any Angle to generate any fan, but of course, you can set three points, one fixed center, one fixed beginning of the circle, and then the other point goes along the circle, and then you connect the two lines to a variable arc, and I ask you, is that a problem? ! And for UI designers, there’s no functional basis, so just go with it. Let the mask do it. I started by using AI to make a beautiful circular base, as beautiful as I wanted, as complicated as I wanted. Something like this:

@keyframes deform{
0% {d:path('M400, 300 l650, 300 l650, 300 z'} /* * * * * {d:path('M400, 300 l400 l600 50, 300 z')}}#animate{animation:deform 2s; fill:#FFFFFF}Copy the code

Look at the effect of this quarter sector

8. Dynamic effect of double mask overlay

The above click click gradually shows the animation effect of the sector, and then another way of thinking, this time to achieve the double magic of rotating mask and time.

transform:rotate

<style>
@keyframes rotate{
0% {fill:#FFFFFF; transform:rotate(0deg); transform-origin:400px 300px}
100% {fill:#FFFFFF; transform:rotate(-360deg); transform-origin:400px 300px}}/* Define rotation animation */#animate{animation:rotate 2s linear ; fill:#FFFFFF}
@keyframes fix{
50% {fill:# 000000; transform:translateY(0)}
100% {fill:#ffffff; transform:translateY(-300px)}}/* Define jump animation */#animate2{animation:fix 2s step-start; }
</style>
<rect x="0" y="0" width="800" height="600"/>
<mask id="shade">
<rect x="0" y="300" width="800" height="300" id="animate"/ > <! Draw a white rotation mask --> <rect x="0" y="300" width="800" height="300" id="animate2"/ > <! > </mask> <g mask="url(#shade)">... Several base diagram circle code... </g>Copy the code

The result is a silky, scalloped scan

9. A dynamic mask for my own use

The following example is to show designers how you can use masks in AI (or PHOTOSHOP) and then copy the same idea into our animations. For example, UI designers love Boolean operations, which can be converted into interesting animations.

Let’s leave SVG mask animation for now, and update it with other fun and easy to use effects.