Apple WeChat Official Account Formatting Effect

Recently, everywhere you can see this WeChat public account case that has gone viral.

https://mp.weixin.qq.com/s/ZYfIqwPNbHVepSyJsLFk-w

Let's talk about how it was achieved. It's not complicated, mainly using SVG animation effects + creativity to achieve such a cool effect.

There are only two animation elements involved, opacity and height.

WeChat graphic content is essentially a piece of HTML code. Let's start with a demo.

This is a normal image, but it is formatted with all images.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>SVG Demo1</title>
        <style>
            * {
                margin: 0 auto;
            }
            .img-block {
                width: 100%;
            }
            .content img {
                display: block;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="img-block">
                <img style="width: 100%;" src="img/1.jpg" alt="" />
            </div>

            <div class="img-block">
                <div style="display: block;"></div>
                <img style="width: 100%;" src="img/2.jpg" alt="" />
            </div>
            <div class="img-block">
                <img style="width: 100%;" src="img/3.jpg" alt="" />
            </div>
        </div>
    </body>
</html>

Adjusted to:

...
<div class="content">
	<div class="img-content">
		<div class="img-block">
			...
		</div>
			...
	</div>
	<div class="svg-content">
		<svg
				height="350px"
				width="100%"
				opacity="0"
				style="background-size: contain; background-repeat: no-repeat; width: 100%; height: 375px;background-image:url(img/demo-1.gif);background-size:100%,100%;"
				version="1.1"
				viewBox="0 0 339 350"
				xmlns="http://www.w3.org/2000/svg"
				preserveAspectRatio="xMidYMin meet"
				calcMode="spline"
			>
				<animate
					attributeName="opacity"
					begin="click"
					dur="1s"
					fill="freeze"
					restart="never"
					keyTimes="0;0.0001;1"
					values="0;1;1"
				/>
				<animate
					attributeName="height"
					fill="freeze"
					restart="never"
					calcMode="spline"
					keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0"
					keyTimes="0;0.0035;1"
					values="375;1640;1640"
					dur="1200s"
					begin="click + 2.75s"
				></animate>
			</svg>
	</div>
</div>

But there is a problem, the height is different on different screens, so we need to ensure consistent height. This can be achieved by using padding, as shown below:

<div class="img-content">
  <div class="img-block" style="padding-top: 500px; background:url(img/1.jpg); background-size: contain; background-position: center; background-repeat: no-repeat;">
    <!-- <img style="width: 100%;" src="img/1.jpg" alt="" /> -->
  </div>
  <div class="img-block" style="padding-top: 500px; background:url(img/2.jpg); background-size: contain; background-position: center; background-repeat: no-repeat;">
    <!-- <img style="width: 100%;" src="img/2.jpg" alt="" /> -->
  </div>
  <div class="img-block"  style="padding-top: 500px; background:url(img/3.jpg); background-size: contain; background-position: center; background-repeat: no-repeat;">
    <!-- <img style="width: 100%;" src="img/3.jpg" alt="" /> -->
  </div>
</div>

Two key points to summarize:

The outer box of the image (img-content) adds the attribute height: 0, but does not add overflow: hidden. This is crucial and affects whether the content inside the box can be displayed properly if it exceeds the height.
The height of the outermost box (content) is completely supported by the height of the svg, which, combined with the first point, achieves our goal of controlling the height of the svg to display the desired content.

As for SVG animation, it will be discussed in another article.

Click here to view: SVG height extension example