Apple 微信公众号排版效果

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

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

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

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

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

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

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

调整为后的:

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

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

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

总结的两个关键点:

  1. 图片外层 box(img-content) 增加 height:0 属性,但是没有添加 overflow:hidden 这点很关键,这影响到 box 里面的内容超过了高度是否能够正常展示。
  2. 最外层 box(content) 的高度完全由 svg 的高度来支撑,结合第一点的话也就达到了我们的目的,控制 svg 的高度,来展示所需要的内容。

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

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

本文链接:

https://fun2ex.com/tech/apple-ipad-for-wechat-article.html
1 + 3 =
快来做第一个评论的人吧~