I made a tweet before, using some small SVG animations, the effect is as follows :(the GIF is long, please skip to see if you know the interaction)

The following is the design idea:

First, preliminary preparation

  • Adobe Illustrator(AI Software)
  • A handy code editor
  • Google Chrome
  • A public account

Second, the process

The last article covered how to embed SVG code in public account text messages

The first thing is to draw the elements in the AI. If the script is complicated, we can add layers step by step.

Source code will not be presented because there are so many hahaha – (of course most of them are paths)

Here are some key animation effects

1. Ball animation

    <circle id="cir1" cx="375" cy="492.5" r="18.5" fill="none" stroke="# 000000" stroke-miterlimit="10" stroke-width="2">
        <animateTransform attributename="transform" type="translate" begin="0s" dur="1s" keySplines="0.42 0, 0.58 1.0; 0.42 0, 0.58 1.0; 0.42 0, 0.58 1.0; 0.42 0, 0.58 1.0; 0.42 0, 0.58 1.0; 0.42 0 0.58 1.0" values="0 0; 0 10; 0 30; 0 0; 0 to 30; 0 to 10; 0 0" keyTimes="0; 0.16; . 33; . 5; . 66; . 83; 1" repeatCount="indefinite" fill="freeze" additive="sum"></animateTransform>
        <animateTransform attributename="transform" type="translate" begin="14s" dur="0.5 s" values="0 0;-200 0" repeatCount="1" fill="freeze" additive="sum"></animateTransform>
    </circle>
Copy the code

Hollow ball animation is divided into two parts, bounce and left shift, both of which are essentially transform

Animation properties:

  • attributename: The name of the element attribute to be changed
  • typeType:
  • begin: indicates the start time of the animation.begin="1s"I’m going to execute at 1s,begin="1s; 3s"The animation is executed only once at 1s and again at 3s. If the animation has not finished before, it will immediately stop and start from the beginning.begin="click+1s"Execute after clicking the current element for 1s

Note: begin=”id. Click +3s” cannot be implemented because the public account text will filter out id.

  • dur: Animation execution time.

The begin and dur time value units can be “h” | “min” | “s” | “ms”

  • keyTimes: can be understood as the CSS@keyframes, values between 0 and 1, define the time at which each animation is completed, as shown in the code abovekeyTimes="0; 0.16; . 33; . 5; . 66; . 83; 1"Represents 0%, 16%, 33%, 50%, 66%, 83%, 100%,keyTimesThe number of frames in thevaluesIn the same
  • keySplines: This value is used to specify the Bezier curve during animation execution
  • from.to.by.values:

The starting value of the from animation (omitted from the same value as to); The end value of the to animation (absolute); Relative change value of by animation (relative); Values are directly combined with the attributeName attribute to set specific values, used between each value; Space;

  • repeatCount: indicates the number of animation executions, which can be a valid value |indefinite(Infinite loop)
  • fill: indicates the filling method of animation gaps.remove(Default, back to where the animation started) |freeze(Leave the animation at the end of the state)
  • additive: Controls whether the animation is attached.replace(Default) |sum(attached)
  • accumulate: accumulation.none(Default) |sum(The position at the end of the animation is used as the starting position of the next animation)
  • restart: The following parameters are supported:always(the default) |whenNotActive(animation is ongoing, is can’t restart the animation) |never

2. Text animation

   <g id="text1" opacity="0">
        <animate attributename="opacity" begin="1s" dur="2s" values="0; 0.8; 1; 0" keyTimes="0; 0.5; 0.75; 1" repeatCount="1" fill="freeze"></animate>
        <animateTransform attributename="transform" type="translate" begin="2.5 s" dur="0.5 s" values="0 0;0 -20" repeatCount="1" fill="freeze" additive="sum"></animateTransform>
        <path d="M259.65, 240.2 H254v3. 35 h - 1.8 v - 26.56 - h7.45 V240.2 z M257.85, 238.32 v - 19.51 H254v19. 51 h257. 85 z M265.74, 234.15 C - 1.19, 4.25-2.52, 8.21-3.96, 11.91 l - 1.73-0.72 c1.58-3.85, 2.95-7.77, 4.1 11.81 L265.74, z M265.63 234.15, 227.78 l - 1.26, 1.26 C - 1.01-1.4-2.38-2.88-4.07-4.46 C263.15 l1.26-1.19, 224.83, 264.51, 226.3, 265.63, 227.78 z M266.28, 218.06 l - 1.26, 1.22 C - 0.97-1.26-2.3-2.59-4-4 l1. C263.83 22-1.15, 215.43, 265.16, 216.73, 266.28, 218.06 z M271.53, 213.78-0.22 c, 1.01-0.5, 1.98-0.79, 2.92 H12.09 v1.84 h - 12.78 - c - 1.01 -, 2.41-2.34, 4.43, 3.96, 6.01 l - 1.22-1.48 c2.41-2.38, 4.03, 5.54, 4.9 9.58 L271.53, z M269.16 213.78, 230.51 C0.22-2.81, 0.36-5.62, 0.43-8.46 h11.81 c - 0.07 -, 3.17-0.14, 6.01, 0.22, 8.46 h2.45 v1.8 h - 2.48 - c - 0.11, 2.84-0.18, 5.11-0.25, 6.84 h2.05 v1 . 69 h - 2.16 - c - 0.07, 1.19-0.14, 1.94, 0.22, 2.23-0.22 c, 1.15-0.65, 1.98, 1.3, 2.56-0.65 c, 0.47-1.58, 0.72-2.81, 0.72 h - 2.56 l - 0.54-1.73 C1.04, 0.04, 1.98, 0.07, 2.81, 0.07 c0.58, 0,1.12-0.11, 1.62-0.29 c0.5-0.29, 0.86, 0.86, 1.08-1.76 c0.04-0.25, 0.11, 0.86, 0.18-1.8 H267. 9 c0.43-2.77, 0.83-5.62, 1.12-3.35 v - 1.8-8.53 h H269.16 z M270.02, 239.15 h9.11 c0.07-1.73, 0.14-4.03, 0.22-6.84 h - 8.53 C270.6, 234.8, 270.34, 237.06, 270.02, 239.15 z M279.52, 223.78 h - 8.24 - c - 0.07, 2.38-0.18, 4.64-0.32, 6.73 h8.42 C279.42, 228.5, 279.45, 226.23, 279.52, 223.78 z M277.15, 236.85 l - 1.15, 1.19 c - 0.94-1.15-2.16-2.38-3.74-3.67 l1.19-1.08 C274.92, 234.44, 276.14, 235.62, 277.15, 236.85 z M277.33, 228.35 l - 1.19, 1.15 c - 0.83-1.08-1.94-2.23-3.38-3.46 l1.15-1.12 C275.28, 226.09, 276.39, 227.2, 277.33, 228.35 z"></path>
        <path d="M293.24, c0.36 240.23, 0.54, 0.58, 1.3, 0.58, 2.23 c0, 1.44-0.43, 2.66-1.26, 3.71-0.83 c, 1.01-1.91, 1.69-3.28, 2.05 v - 1.44 C0.94-0.29, 1.66-0.79, 2.16-1.51 c0.5-0.65, 0.72, 1.4, 0.72-2.27 - c - 0.14, 0.04, 0.36, 0.07, 0.72, 0.07-0.5 c, 0-0.94-0.18-1.3-0.54 C - 0.36-0.36-0.54-0.79-0.54-1.3 c0-0.58, 0.14, 1.04, 0.5-1.37 c0.36-0.36, 0.83, 0.5, 1.44 0.5 C292.27, 239.37, 292.81, 239.66, 293.24, 240.23 z"></path> 
        </g>

Copy the code

Text animation is divided into two parts, transparency 0-1-0, and displacement animation, each text will generate a , you can group the same effect of a sentence, animation is written in the group < G > tag, here is more troublesome time adjustment, all animation is actually in a timeline, through duR to control the sequence of execution.

3. Click on the Deformation animation

Click the deformation animation to modify D, and record the path before and after the deformation

        <g id="cir2" opacity="0">
            <animate attributename="opacity" begin="22.5 s" dur="1s" values="0; 0.8; 1" keyTimes="0; 0.75; 1" repeatCount="1" fill="freeze"></animate>
            <animate attributename="opacity" begin="click+12s" dur="1.5 s" values="1. 0.8; 0" keyTimes="0; 0.75; 1" repeatCount="1" fill="freeze"></animate>
            <path fill="#FFFFFF" d=C0 "M585, 491.76, 6.84-8.5, 15.98, 22.69, 12.89 c - 6.35-1.38-13.41-4.64-18.66-5.01 C - 4.88-0.34-7.64-4.19-7.64-7.37 c0-6.84, 13.41, 11.35, 26.31-12.38 c5.57-0.45, 10.46, 0.21, 14.44, 2.58 C581.91, 486.09, 585487.56, 585491.76 z" id="click">
                <animate attributeName="d" dur="10s" repeatCount="1" begin="click" fill="freeze" values=C0 "M585, 491.76, 6.84-8.5, 15.98, 22.69, 12.89 c - 6.35-1.38-13.41-4.64-18.66-5.01 C - 4.88-0.34-7.64-4.19-7.64-7.37 c0-6.84, 13.41, 11.35, 26.31-12.38 c5.57-0.45, 10.46, 0.21, 14.44, 2.58 C581.91, 486.09, 585487.56, 585491.76 z; M578, 494 c0, 3.16 1, 10-15.69, 10.66-6.5 c, 0.29-13.47-0.99-15.31-4.66 - c - 2-4-1. 49-6.04-1-9 c1-6, 6-12-13 C5.55-0.62, eight,1,14,6 C576.09, 484.91, 578490578494 z; M578, 494 c0, 8.84-6.66, 16.5-15.5, 16.5-4.52 c, 0-8.73-2.01-11.77-5.15 - c - 2.9-3-4.73-7.04-4.73-11.35 C0-4.06, 1.51-7.76, 4-10.58 c2.93-3.32, 7.22, 5.42, 12-5.42 c4.3, 0,8.2, 1.69, 11.07, 4.45 C576.11, 485.36, 578489.46, 578494 z" keyTimes="0; 0.5; 1" restart="never"></animate>
            </path>
        </g>

Copy the code

Display animation step by step (click+ns) The events after click need to be nested layer by layer (click events are actually added to the marshalling, the transparency of the outer elements affects the inner layer)

  • The first to disappear is put in the innermost, from the inside out;

  • Step by step the ones that come first are put on the outside, from the outside in;

That is to say, one layer on top of the other

The real difficulty here is that the deformed animation begins with this click, because the design has elements that disappear and appear and cannot be grouped together, so use the penetration trigger. Principle:

  • touchstart: the dom or bubbling DOM touch fires immediately,
  • click: The dom or a bubbling DOM starts with a touch that does not move the finger on the page (some browsers allow short movements) and on the DOM that the finger is away from the screen and the time between touch and away from the screen is relatively short, about 300ms(A tag is also click)

If the upper element moves away quickly within 300ms, the click event of the lower element will be triggered, thus penetrating the trigger effect.

The event is triggered in the order toustart> Touchend (about 200ms) >click

So when we click, we animate the deformation with Click, and then animate the appearance of the element with Toustart

The code is complicated, and it’s only partially cut

Third, summary

In WeChat real number written in the graphic animation will let the amount of code duplication and even had to write a large number of repetitive code, so comparative test logic and design, there are a lot of excellent works of the teacher are thousands or even tens of thousands of lines of code, but black layout of science and technology has become the major trend of brand to use, to make a single rigid tweet more interesting. Typeset such an article from writing scripts to drawing to animation implementation I used a whole two days, with more than 200

, let me have a deeper understanding of animation details, encountered a lot of holes and then used some strange methods to solve, which is what makes me feel interesting front end.