IPhone12自适应长图svg解析

原文链接：https://mp.weixin.qq.com/s/S0fpT4JbdVvdKDXG5BemWw

参考：https://developers.weixin.qq.com/community/develop/article/doc/0000e8f0ba8a88b7522926d9251813

其中一个长图的关键代码

!<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>huan</title>
</head>
<body><div class="rich_media_content " id="js_content" style="visibility: visible;">                   <div class="rich_media_content " id="js_content" style="visibility: visible;">                   <section style="overflow-anchor: none; display: block; user-select: none !important; visibility: visible;"><section style="display: block; transform: rotate(180deg); transform-origin: center center; visibility: visible;"><section style="display: block;height: 0 !important;margin-top: -1px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 5344" style="display: block;"><g><foreignObject x="0" y="0" width="1080" height="2918"><svg height="2918" style="display: block;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/s37uxK5D5wmwNs8K7ia5xt8qohrGB3zfzN2dJOamib7zTVibO0Tia13cOo6xWQCtjlg2cSgclq7Vict7D3bgacQULmw/640&quot;);background-size: 100% auto;background-repeat: no-repeat;" width="1080" xmlns="http://www.w3.org/2000/svg"></svg></foreignObject><foreignObject x="0" y="2917" width="1080" height="2427"><svg height="2427" style="display: block;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/s37uxK5D5wmwNs8K7ia5xt8qohrGB3zfzhESaInkl8RXhFf16OFfJIclc46KUK63Me0a2uZtEW6WzN4SZ1xRL7Q/640&quot;);background-size: 100% auto;background-repeat: no-repeat;" width="1080" xmlns="http://www.w3.org/2000/svg"></svg></foreignObject></g></svg></section><svg style="display: block;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/s37uxK5D5wmwNs8K7ia5xt8qohrGB3zfzIOalWF7gGKoMw0utYf1ZTdTMl1SzU6ib94vKAJs84jrD5fNaCv1NBqA/640&quot;);background-size: 100% auto;background-repeat: no-repeat;max-width: none !important;-webkit-tap-highlight-color:rgba(0,0,0,0);transform:rotateZ(0);" viewBox="0 0 1080 751" width="100%"><set attributeName="visibility" attributeType="CSS" to="hidden" begin="click+2.2s" fill="freeze" restart="never">      </set><animate attributeName="opacity" values="1;0;0" keyTimes="0;0.09;1" begin="click" dur="2.2s" fill="freeze" restart="never"></animate><animate attributeName="width" fill="freeze" restart="never" dur="2s" values="100%;711.58%" calcMode="spline" keySplines="0.42 0 0.58 1.0" begin="click+0.2s"></animate></svg><svg style="display: block;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/s37uxK5D5wmwNs8K7ia5xt8qohrGB3zfzKgWmH9MKw1vibO5NIMCTU3cjxSo9QbQiabwkVKzrRNm9x8d62A8p3XlA/640&quot;);background-size: 100% auto;background-repeat: no-repeat;transform:rotateZ(0);margin-top: -1px;" viewBox="0 0 1080 608"></svg><section style="display: block;height: 0 !important;margin-top: -1px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 6788" style="display: block;"><g><foreignObject x="0" y="0" width="1080" height="3403"><svg height="3403" style="display: block;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/s37uxK5D5wmwNs8K7ia5xt8qohrGB3zfz4kibbhThiaibAePUCWffkWs2aT54ViaxLw1uzFLZS1C1vah2ne77icoyZzQ/640&quot;);background-size: 100% auto;background-repeat: no-repeat;" width="1080" xmlns="http://www.w3.org/2000/svg"></svg></foreignObject><foreignObject x="0" y="3402" width="1080" height="3386"><svg height="3386" style="display: block;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/s37uxK5D5wmwNs8K7ia5xt8qohrGB3zfzU4iaXN99OoqO2RCUlgvELiaE230PFoLyRTp33PzO3tyvyyXCDyQSHwfA/640&quot;);background-size: 100% auto;background-repeat: no-repeat;" width="1080" xmlns="http://www.w3.org/2000/svg"></svg></foreignObject></g></svg></section></section></section></div></div></body>
</html>

拉长代码分析

原理

我们注意到在点击之后下面半部分消失了，同时出现了长图,我们来简化一下说一下原理

简单来说就是设计一个svg触发器，通过改变触发器的宽和高改变外层容器的宽和高

创建容器标签和svg标签

<section style="height:0;line-height:0;"><svg viewBox="0 0 750 800" style="background-color:blue;width:100%;display:inline-block;"></svg>
</section>

将外层容器的高度设置为0，overflow设置为hidden,然后用子元素将父容器撑开
这里要补充一个前端的知识，当父容器的高度没有设置时，是可以根据子元素的高度来改变的

<section style="overflow:hidden;line-height:0;"><section style="height:0;line-height:0;"><svg viewBox="0 0 750 800" style="background-color:blue;width:100%;display:inline-block;">            </svg><svg viewBox="0 0 750 800" style="background-color:green;width:100%;display:inline-block;">         </svg></section><svg viewBox="0 0 750 500" style="background-color:red;width:100%;display:inline-block;">   </svg></section>

对撑开这个动作设置动画效果，当子元素的宽度从100变为200时，父元素的宽度和高度也会随之改变，达到了拉伸的效果

  <section style="overflow:hidden;line-height:0;"><section style="height:0;line-height:0;"><svg viewBox="0 0 750 800" style="background-color:blue;width:100%;display:inline-block;"></svg><svg viewBox="0 0 750 800" style="background-color:green;width:100%;display:inline-block;"></svg></section><svg viewBox="0 0 750 500" style="background-color:red;width:100%;display:inline-block;"><animate attributeName="width" from="100%" to="320%" dur="1s" fill="freeze" begin="click" restart="never"></animate><animate attributeName="opacity" begin="click" from="1" to="0" dur="0.1s" fill="freeze" restart="never"></animate></svg></section>

其实就是把svg的结束值设置为隐藏且保持不变,同时当点击之后透明度变为0，实现点击消失的效果

<svg style="display: block;
            background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/s37uxK5D5wmwNs8K7ia5xt8qohrGB3zfzIOalWF7gGKoMw0utYf1ZTdTMl1SzU6ib94vKAJs84jrD5fNaCv1NBqA/640&quot;);
            background-size: 100% auto;
            background-repeat: no-repeat;
            max-width: none !important;
            -webkit-tap-highlight-color:rgba(0,0,0,0);
            transform:rotateZ(0);" viewBox="0 0 1080 751" width="100%"><set attributeName="visibility" attributeType="CSS" to="hidden" begin="click+2.2s" fill="freeze" restart="never">      </set><animate attributeName="opacity" values="1;0;0" keyTimes="0;0.09;1" begin="click" dur="2.2s" fill="freeze" restart="never">             </animate><animate attributeName="width" fill="freeze" restart="never" dur="2s" values="100%;711.58%" calcMode="spline" keySplines="0.42 0 0.58 1.0" begin="click+0.2s">               </animate>
</svg>

set元素

<set attributeName="visibility" attributeType="CSS" to="hidden" begin="click+2.2s" fill="freeze" restart="never">
</set>

作用

set用于设置属性值，可以用于实现延迟设置功能，也就是可以在特定时间之后修改某个属性值。

参数详解

attributeName是定义要设置的属性，可以是SVG的标签属性如width,height，也可以是css属性opacity,visibility
attributeType是定义要设置属性的类型,支持三个固定参数"CSS | XML | auto"，与attributeName相对应。SVG标签上的属性，设置attributeType=‘xml’，css属性设置type值为css。auto为默认值，自动判别attributeName的属性是属于XML还是CSS（实际上是先当成CSS处理，如果发现不认识，直接XML类别处理）
to：表示动画的结束值，这里表示这个标签在结束之后会隐藏，以便于让长图展现出来
begin指动画开始的时间，这里表示在点击之后2.2秒开始
fill：fill表示动画间隙的填充方式。支持参数有：freeze | remove，freeze是默认值，表示动画结束直接回到开始的地方。freeze表示动画结束之后固定在结束的位置
restrat：用于设置动画是否可以重复执行。可设置的值为’always | whenNotActive | never
- always是默认值，表示总是，也就是没触发一次动画执行一次。
- whenNotActive：表示动画正在进行的时候，是不能重启动画的。
- never：表示动画不能被重新触发。

测试代码

比如对这个svg元素单独设置set属性可以实现动画在点击之后2.2秒结束，结束的时候隐藏并且保持隐藏状态的效果

<svg viewBox="0 0 750 800" style="background-color:blue;width:100%;display:inline-block;"><set attributeName="visibility" attributeType="CSS" to="hidden" begin="click+2.2s" fill="freeze" restart="never">      </set>
</svg>

animate元素

<animate attributeName="opacity" values="1;0;0" keyTimes="0;0.09;1" begin="click" dur="2.2s" fill="freeze" restart="never">               </animate>

作用

实现基础动画

参数详解

与set相同，attributeName设置的是属性的名字，begin是开始的条件是click也就是点击后开始，fill是结束时保持结束一刻的状态，restart设置为never表示不再重复
value：可以设置多个动画节点，这里表示在0秒时透明度为1，在0。09秒和1秒透明度都变为0
keytimes：用于限定各个阶段的执行时间，是一串0-1的浮点数字组，每个数值的有效取值范围为0-1，代表每一个动画阶段必须在那个时间点执行完成，keyTimes的数字组长度要和values长度一致
dur：动画执行的时长，可以设置的值为常规的时间值或者‘indefinite’。设置’indefinite’跟没有设置动画是一个意思，这个例子是设置时间为2.2秒

 <animate attributeName="width" fill="freeze" restart="never" dur="2s" values="100%;711.58%" calcMode="spline" keySplines="0.42 0 0.58 1.0" begin="click+0.2s">
</animate>

第二个animate设置的属性是宽度，表示在点击之后宽度从100%变为711.58%，结束时冻结，且不重复动画执行时长为2s，开始时间为点击之后的0.2秒

calcMode:用于定义动画执行的节奏，也就是在规定时间内是如何完成这一整套动画的。calcMode属性支持4个值分别为：discrete,linear,paced,spline。
- discrete：不连续的运动，就是从一个状态直接跳到另一个状态下，如从from状态直接跳到to状态
- linear：线性运动，animateMotion元素以外元素的calcMode默认值。动画从头到尾的速率都是一致的。每个动画阶段的执行时间都是一致。
- paced ：线性运动，动画从头到尾执行速度都是一样，如果设置了paced，keyTimes无效。
- spline ：属于可以自定义执行速度，类似于-timing-function: cubic-bezier()这一CSS属性。我们可以通过keyTimes和keySplines属性来定义各个动画的执行效果
keySplines:当calcMode的值为spline时才有效，keySplines可以设置多组，每一组用";"隔开。每一组代表在这个动画阶段中执行的速率

苹果svg解析自适应长图相关推荐

SVG黑科技排版『点击多次展开无缝长图』
案例解析 SVG黑科技排版『点击多次展开无缝长图』模板拆解第一次展开 <!DOCTYPE html> <html> <head><meta charset ...
【uni-app】uParse 富文本解析插件遇到长图、大图宽高比异常问题
前言本文是[uni-app]rich-text 无法处理 video 的解决办法续集. 用 uParse 富文本解析插件后,一切正常.今天同事突然发了个长图(800px*15150px).发现版式异 ...
SVG互动排版公众号图文『两次物体移动与展开长图』模板代码
模板效果模板代码 <section style="overflow: hidden;"><section style= ...
SVG排版公众号文章『两次互动，展开长图』模板代码
模板效果模板代码 <section style="overflow: hidden;margin: 0 auto;text-align: center;"><! ...
SVG互动排版公众号图文『点击播放GIF展开长图』模板代码
模板代码 <section style="line-height: 0;overflow: hidden;"><sectio ...
SVG互动排版公众号图文『点击播放GIF与音乐，并展开长图』模板代码
模板代码 <section style="overflow: hidden;line-height: 0;"><sectio ...
苹果x如何截屏_果粉请注意！苹果手机也能截长图了，原来iPhone截屏还能这样玩！...
如今很多用户在选择手机时都十分注重手机的实用性,而一部好用的手机除了拥有强大的配置以外,一些实用的小功能也能顺利圈粉.苹果手机和安卓手机都各有千秋,不少使用iPhone的网友都说,安做手机长截图功能很 ...
Chrome截长图+svg转换为png
Chrome截长图据说插件都有bug,我就没试插件直接用这种原生的方法了,毕竟在电脑上截长图的场景不多在你要截屏的网站上右键-检查单击一个有手机和平板的图标,进入 Device Toolbar ...
android加载长图宽度自适应,Android使用Glide加载超长图
app项目开发过程中,大都有查看图片详情的功能模块.实现的方式一般都是通过viewpager+photoView+Glide的方式.这种方式下,如果碰到加载超长图,比如说高清版的清明上河图/世界地图, ...

苹果svg解析自适应长图

IPhone12自适应长图svg解析

其中一个长图的关键代码

拉长代码分析

原理

set元素

作用

参数详解

测试代码

animate元素

作用

参数详解

苹果svg解析自适应长图相关推荐

最新文章

热门文章