模板效果

点击查看效果

模板代码

<section style="overflow: hidden;margin: 0 auto;text-align: center;">
    <!-- 长图内容 -->
    <section style="height:0;display: block;margin-left: auto;margin-right: auto;">
        <section style="background-color: rgb(237, 239, 240);">
            <img src="https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSOBWg8rFK9p5DK7qcibxdGng3jfozGASibvUP6z1FtMuVgq2lovfVKMUAclBibic0ZWImgWyhutDpI1g/0?wx_fmt=png" style="width: 100%!important; height: auto !important; visibility: visible !important;">
        </section>
    </section>
    <!-- 动画区域 -->
    <section style="display: block;pointer-events: none;transform: scale(1);">
        <!-- 第二页 -->
        <svg style="display: block;width: 100%;transform: scale(1);pointer-events:none;margin-left: auto;margin-right: auto;max-width:none!important;" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 1200" xml:space="preserve" >
            <!-- 展开动画 -->
            <animate attributeName="width" 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="100%;208%;208%" dur="900s" begin="click+1"></animate>
            <g>
                <!-- 第二页事件触发区域移出掉,避免重复点击 -->
                <animateTransform attributeName="transform" type="translate" values="2222 0" fill="freeze" begin="click+1" dur="1s" restart="never"></animateTransform>
                <!-- 第二次点击透明度变化 -->
                <foreignObject x="0" y="0" width="100%" height="100%">
                    <svg style="display: block;width: 100%;background-position: 0 0;background-repeat: no-repeat;background-size: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSOBWg8rFK9p5DK7qcibxdGnvIYMP0icBINMVF7fuDWibVZ24jkDe6CBQR9bpcWXYKEdb73WalMSjVdw/0?wx_fmt=png);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 750 1200"></svg>
                </foreignObject>
                <rect x="0" y="0" fill="#fff" width="750" height="1200" opacity="0" style="pointer-events:painted;"></rect>
                <animate attributeName="opacity" begin="click" dur="1s" values="1;0" fill="freeze" restart="never"></animate>
            </g>
        </svg>
        <!-- 第一页 -->
        <svg style="display: block;width: 100%;margin-left: auto;margin-right: auto;margin-top: -148vw;background-position: 0 0;background-repeat: no-repeat;background-size: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSOBWg8rFK9p5DK7qcibxdGnrknejH38ibtTej8dcYibZTia4q56oH6sC1zoHr0sibqibibUymvrt3aQk7KA/0?wx_fmt=png);opacity: 1;pointer-events: none;transform: scale(1);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 1200" xml:space="preserve">
            <!-- 第一次点击透明度变化 -->
            <animate attributeName="opacity" begin="click" dur="1s" values="1;0" fill="freeze" restart="never"></animate>
            <g data-author="我是懂点君，关注我，从此让你多懂点，少吃亏！">
                <!-- 第一页事件触发区域移出掉,让第二页可以接收事件点击 -->
                <animateTransform attributeName="transform" type="translate" values="2222 0" fill="freeze" begin="click+1" dur="1s" restart="never"></animateTransform>
                <rect x="0" y="0" fill="#fff" width="750" height="1200" opacity="0" style="pointer-events:painted;"></rect>
            </g>
        </svg>
    </section>
</section>

模板分析

• 素材准备：两张引导图 + 一张大长图；
• 利用margin-top负值（案例中设置margin-top: -148vw;），使两个SVG重叠在一起；SVG顶部之间的距离都是负数了，而且数值刚好是SVG的高度，你说两者是不是重合了？
• 第一次点击的时候，需要把第一个SVG事件触发区域移出可视区，这样第二次点击的时候，第二个SVG才可以接收事件触发动画；
• 展开动画的宽度百分比怎么计算？当width="100%"时，SVG高度为1200；大长图的图片高度为2500，当(2500/1200 * 100) = 208%时，SVG高度为2500，完全展开图片，也能自适应各种屏幕展开。