Apple 微信公众号排版效果

近期到处都可以看到这个被刷屏的微信公众号案例。

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

我们就来聊一聊怎么实现的，说起来也不复杂，主要就是利用 SVG 的动画效果 + 创意达到了这么酷炫的效果。

涉及到也只有两个动画元素 opacity 和 height 的变化。

微信图文内容本质上也是一段 HTML 代码，先看一个 demo

这是一篇正常的图片，只不过是全图片排版的。

Copy





SVG Demo1

* {
margin: 0 auto;
}
.img-block {
width: 100%;
}
.content img {
display: block;
width: 100%;
}



















调整为后的：

Copy
…



…

…


<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>




但是会碰到一个问题，就是不同屏幕下的高度是不一样的，那么我们就需要确保高度一致，利用 padding 可以完成这个小调整，如下

Copy












总结的两个关键点：

图片外层 box (img-content) 增加 height:0 属性，但是没有添加 overflow:hidden 这点很关键，这影响到 box 里面的内容超过了高度是否能够正常展示。

最外层 box (content) 的高度完全由 svg 的高度来支撑，结合第一点的话也就达到了我们的目的，控制 svg 的高度，来展示所需要的内容。

关于 SVG 的动画，后面另外起文另说。

点击这里查看：SVG 高度扩展示例