公众号SVG图文『动画伸缩翻页』模板代码
模板效果
模板代码
<section style="display: block; overflow: hidden; background-color: #fff;font-size: 0px;pointer-events: none;">
<section style="display: block;margin: 0px auto;text-align: center;">
<section style="height:0;display: block;margin-left: auto;margin-right: auto;">
<!-------------------------------- 最后显示的长图 -------------------------------->
<section style="height:0;">
<p>
<img src="https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQSyoPnDG2jIxaRTYueo0VNcmPqVKnyygl2F27bF1jEyAbpb7o66Fa1VZhxhVsygKlF0SgR8Lhbuw/0?wx_fmt=png">
</p>
</section>
<!-------------------------------- 控制图片切换 -------------------------------->
<svg viewBox="0 0 750 880" style="display: inline-block;pointer-events:none;width: 100%;vertical-align: top;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<g>
<g>
<!-- set：元素可以用来设定一个属性值，并为该值赋予一个开始时间。 -->
<set attributeName="visibility" from="visible" to="hidden" begin="7.6"></set>
<foreignObject x="0" y="0" width="750" height="880">
<svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0 0;background-repeat: no-repeat;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQSyoPnDG2jIxaRTYueo0VNBucaSiaKwd8Sms3mDWZV56JtUdl1VDwUNibZ9jhVwZyOLjB0QbuSx0fg/0?wx_fmt=png);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 750 880"></svg>
</foreignObject>
</g>
<g>
<!-- set：元素可以用来设定一个属性值，并为该值赋予一个开始时间。 -->
<set attributeName="visibility" from="visible" to="hidden" begin="5.4"></set>
<foreignObject x="0" y="0" width="750" height="880">
<svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0 0;background-repeat: no-repeat;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQSyoPnDG2jIxaRTYueo0VNSEubw20iaBricb3LjG1Sx66BoSPh5wE3ltxvLSO33g1PdckSXwBGjQbA/0?wx_fmt=png);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 750 880"></svg>
</foreignObject>
</g>
<g>
<!-- set：元素可以用来设定一个属性值，并为该值赋予一个开始时间。 -->
<set attributeName="visibility" from="visible" to="hidden" begin="3.4"></set>
<foreignObject x="0" y="0" width="750" height="880">
<svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0 0;background-repeat: no-repeat;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQSyoPnDG2jIxaRTYueo0VNzicfDAWWOyhGtzxy667u58rWgCia5y1PLUAyT9ia4AWuD8N74gT708wcA/0?wx_fmt=png);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 750 880"></svg>
</foreignObject>
</g>
<g>
<!-- set：元素可以用来设定一个属性值，并为该值赋予一个开始时间。 -->
<set attributeName="visibility" from="visible" to="hidden" begin="1.4"></set>
<foreignObject x="0" y="0" width="750" height="880">
<svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0 0;background-repeat: no-repeat;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQSyoPnDG2jIxaRTYueo0VNV2z23W31a0gCicZVRW7M5ArRiaaosQT1Pelae5ZznI1otgDzwf7jk8iaA/0?wx_fmt=png);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 750 880"></svg>
</foreignObject>
</g>
</g>
</svg>
</section>
<!-------------------------------- 控制高度变化的动画 -------------------------------->
<section style="display: block;margin: 0 auto;pointer-events:none;vertical-align:top;text-align: center;">
<svg viewBox="0 0 750 880" style="pointer-events:none;max-width:none!important;">
<!-- calcMode：该属性指定动画的插值模式。默认的模式是线性的。 -->
<!-- spline —— 插值根据三次贝塞尔样条曲线定义的时间函数从values列表中的一个值插入到下一个值 -->
<animate attributeName="width" fill="freeze" restart="never" keyTimes="0;.75;1" calcMode="spline" keySplines=".5 0 .5 1; 0 0 1 1" values="100%;3%;100%" dur="0.55s" begin="1"></animate>
<!-- fill：属性fill="freeze"时，动画终止时，发生变化的元素属性值停留在动画终止时的状态。 -->
<animate attributeName="width" fill="freeze" restart="never" keyTimes="0;.75;1" calcMode="spline" keySplines=".5 0 .5 1; 0 0 1 1" values="100%;3%;100%" dur="0.55s" begin="3"></animate>
<!-- keySplines：定义了一个与keyTimes列表相关的一组贝塞尔控制点，定义了一个控制间隔速率的三次贝塞尔函数。 -->
<animate attributeName="width" fill="freeze" restart="never" keyTimes="0;.75;1" calcMode="spline" keySplines=".5 0 .5 1; 0 0 1 1" values="100%;3%;100%" dur="0.55s" begin="5"></animate>
<!-- begin：这个属性定义了动画何时开始 -->
<animate attributeName="width" fill="freeze" restart="never" keyTimes="0;.2;1" calcMode="spline" keySplines=".5 0 .5 1; 0 0 1 1" values="100%;3%;490%" dur="3.5s" begin="7"></animate>
</svg>
</section>
</section>
</section>
模板应用
强力驱动