Currently black technology typesetting is more and more common, new media people have made up the code, as a front-end development of course can not lag behind, today also to share how to embed SVG animation in the public number.

First, preliminary preparation

  • Adobe Illustrator(AI Software)
  • A handy code editor
  • Google Chrome
  • A public account
  • Put aside the previous CSS/JS animation ideas, due to the limitations of the public account, to have a very troublesome preparation

Second, AI drawing

The beginning of the beginning: It is best to have an overall script idea for the animation to be designed, so that there is a clear layer structure for drawing and motion editing

1. First, we need to draw the elements we want to display as paths in the AI

Note:

  • Must be a path oh, public number import code does not support image, need to use<foreignObject>(to come later);
  • Do not use gradients/blurs/filters because public accounts will filter out all ids.

A circle is drawn above

2. Click File — Save as and select SVG

After you click Save, you can set the SVG option

  • Text: Convert to outline – Convert text to outline, keeping font; SVG- Keep the label and use the default font for public letters
  • CSS Properties: Select presentation properties

3. Click on the SVG code, copy it to the code editor, and add the animation

You get the following code:

// Just keep the SVG tags<g>Tag can be deleted<svg version="1.1" id="Layer _1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1125 644" enable-background="new 0 0 1125 644" xml:space="preserve">
<circle fill="none" stroke="# 000000" stroke-miterlimit="10" cx="569.5" cy="218.5" r="74"/>
</svg>
Copy the code

According to the whitelist standard of wechat official top, the following animations can be added:

Some commonly used:

<! -- Opacity -->
<animate attributename="opacity" begin="click" dur="2s" values="1. 0; 1" repeatCount="indefinite"></animate>

<! -- transform displacement -->
<animateTransform attributename="transform" type="translate" begin="click" dur="2s" values="0 0; 20 20" repeatCount="1" fill="freeze"></animateTransform>

<! -- Visibility -->
<set attributename="vilibility" begin="click" dur="0.0001 s" from="visible" to="hidden" repeatCount="1" fill="freeze"></set>

<! -- Scale scale -->
<animateTransform attributename="transform" type="scale" begin="click" dur="2s" values="1. 0.145" repeatCount="1" fill="freeze"></animateTransform>

<! Rotate Angle -->
<animateTransform attributename="transform" type="rotate" begin="0s" dur="0.5 s" values="0, 500, 78.2; 10, 500 78.2" repeatCount="indefinite"></animateTransform>

<! -- animateMotion -->
<animateMotion path="11897,52,12529,52,12529 M199, 346 c58," rotate="auto" begin="click" dur="150s" repeatCount="1" fill="freeze"></animateMotion>

<! -- Stroke-Dashoffset Animation -->
<line fill="none" stroke="#FF0000" stroke-width="8" stroke-miterlimit="10" x1="330" y1="1126" x2="447" y2="1126" stroke-dasharray="117117" stroke-dashoffset="117">
    <animate sttributeType="CSS" attributeName="stroke-dashoffset" begin="0s" from="117" to="117" dur="2" fill="freeze" repeatCount="indefinite"></animate>
</line>

Copy the code

In a nutshell:

  • animate: equivalent to the CSStransition
  • animateTransform: equivalent to the CSStransform

We animate the balls, and the radius of the two balls changes (note that the tags are closed, some generated tags are not closed). 

<svg version="1.1" id="Layer _1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1125 644" enable-background="new 0 0 1125 644" xml:space="preserve">
	<circle opacity="0.6" fill="#F2997A" cx="494.667" cy="175" r="45">
	    <animate attributename="r" begin="0s" dur="3s" values="45; 40; 38; 55. 38; 40; 45" repeatCount="indefinite"></animate>
	</circle>
	<circle fill="#F2997A" cx="494.667" cy="175" r="35">
		<animate attributename="r" begin="0.5 s" dur="3s" values="35; 40; 38; 35. 38; 40; 35" repeatCount="indefinite"></animate>
	</circle>

</svg>
Copy the code

Effect:

Three, add to the public account

1. Enter text at will on the edit page of the official account, open the developer mode, and select text

2. Right-click to edit

3. Replace the code we wrote with the previous code

4. At this point, you can see that the dynamic effect has been imported into the editor of the public account

Then do other typesetting

4. Change of thinking

  • Animation in the HTML, and basically is to add on the current dom elements, and the public, embedded in the animation, because do not support id, does not support javascript, CSS support only some simple inline style, so when designing animation is often need to use some of the “smoke screen”, namely to achieve animation does not necessarily add on the current element (see the income), The disappearance of an element can be a change in transparency/color/location off the canvas, or the occlusion of another element.
  • There is no concept of stack order in SVG, as the code goes up the hierarchy

In the following articles, I will explain the specific application of some cases I have done.