wedge

A friend asked me the other day, “Do you know how this works?”

With that, he sent me a preview link

— > mp.weixin.qq.com/s/JaBjmGeuv… <–

After reading surprised wechat public number article can achieve this interactive effect?

Curious, I looked at the source code

What is it that there are so many SVG tags with native styles all over the place?

The principle of

In line with do not understand the good habit of search engine roughly understand the realization of the principle

The vulnerability based on the rich text editor of wechat official account inserts the edited SVG content into the editor

Of course, the insertion of code is only the foundation of the effect implementation. The rest of the interaction is up to us

Knowledge of SVG and SVG animations is required; The SVG API documentation is attached for those who need it

— > developer.mozilla.org/zh-CN/docs/… <–

implementation

Because space is limited, I will briefly talk about the code implementation of the above example. Let’s start with a piece of code

    <svg 
        preserveAspectRatio="xMidYMin meet"
        width="500"
        height="400"
        viewBox="0 0 343 486" 
        xmlns="http://www.w3.org/2000/svg"
        style="..."
    >
        <animate 
            attributeName="height" 
            begin="click+7s" 
            calcMode="spline"
            keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" 
            dur="4s" 
            keyTimes="0; 0.1; 1" 
            fill="freeze"
            values="486; 1300; 2946;"
        >
        </animate>
    </svg>
Copy the code

Let’s start with the SVG tag

  • Set the width and height of the SVG display on the web page
  • The size of the canvas is set to x, y width height;
  • PreserveAspectRatio Sets the zoom relationship between an SVG viewBox and a view
    • XMidYMin sets SVG and view x and y scaling mode values with three Min Mid Max corresponding to the minimum midpoint maximum alignment;
    • Meet Sets SVG scale values for meet and slice. See demo
  • Style sets the SVG style, background image, etc

Next comes the core tag animate

All of the interactive animations in the example are implemented through this element

  • AttributeName Sets the attribute of the animation
  • Begin Sets the animation start instruction and time click+7s, that is, the animation will start 7 seconds later after the click event is completed
  • Dur sets the animation duration
  • Values Sets the change value of the animation keyframe
  • CalcMode sets the transition curve of the animation
    • There are no transitions between discrete key frames
    • Linear transition
    • Spline interpolation interpolates from one value in the values list to the next based on a time function defined by cubic Bezier splines. The points of the spline are defined in the keyTimes property, and the control points of each interval are defined in the keySplines property.
    • Bungled interpolation yields even pace of change throughout the animation
  • Fill sets the state of freeze when the animation ends and remains frozen when the animation ends. Remove Removes when the animation ends

By the above two tags can be realized to change the background picture, width and height; Realize deformation, displacement and other interactive behaviors, and then combine GIF pictures and wechat audio files to complete some interesting business scenes

How interactions are implemented in the example

The whole page is divided into two parts

The first part is the first screen of the page and the second part is the main content after the page is opened

Overwraps their parent setting overflow:hidden Float :left

Click the first part of SVG to rotate the countdown eye opening effect in 7 seconds, then the width becomes 0 and the height becomes the height of the second part of the parent container. The second part of the content is displayed successfully to achieve the switching effect of the two parts of the content

Then comes the second part of the click to switch the picture effect

limited

  • One SVG can only set up one interaction, which makes complex interactions too weak
  • It takes a lot of thought in terms of the code layout and the code hierarchy is a lot of stuff
  • Commissioning is not easy. The local development and the actual terminal effect may differ. Frequent preview debugging is required
  • You can only set the interaction to not allow JS insertion through animate

conclusion

In general, wechat public account joining SVG effect is really good is the so-called static rather than dynamic, so that users have a sense of participation to present the effect of interesting and fun for marketing promotion content is very plus; Add a little spark of inspiration to make your articles stand out from the crowd