GQ实验室于2021-12-21 18:00 发布了全国统一元宇宙水平测试推文
页面效果：
在微信推文中选择【发型】，【脸型】和【服装】生成一个的元宇宙形象，从互动效果来说还是挺有意思的。
技术男看到这个内容后第一反应就是，咦！【发型】，【脸型】和【服装】这些数据是如何往下传递的呢？微信推文是不允许有用户js的；SVG也是不可以有数据传递的。带着这些问题我开始研究这个推文。这里感谢GQ的开发者和运营者，你们太棒了。
技术原理说明：
技术核心还是合理的利用了SVG以下功能：
1、采用SVG的点击事件，执行相应的移动、缩放等功能；
2、页面载入后SVG相关元素自动执行动画功能，特别是移动（transform）功能；
3、SVG图层概念，最上方图层覆盖下方图层；从文案角度来说就是最后代码出现的图片显示在最上方；
结构分析：
1、将内容划分来2个大组，直接呈现的和互动操作；两大组用SVG的<g></g>包裹；
直接呈现：表示用户进来就直接能看到的部分，这些内容不需要用户点击互动。同时用这些图片，在显示区域撑开一个空间，我就姑且称它为画布吧。
互动操作：在用户交互中会用到的图片和辅助图片。
2、 占位空间图片和互动图片分开；
我们来看一段代码就能理解上面两断文字，这两点应该是做微信SVG内容切分的关键，其中部分代码省略，如果需要可以微信我；
1、基本代码结构，这个结构贯穿整个换装逻辑中；
<!--3.1选择发型-->
<g>
<!--3.1定义一个 背景-->
<g></g>
<!--3.2定义互动操作-->
<g>
<!--发型1 先移动看不见的位置(10000 0)-->
<g transform="translate(10000 0)" ></g>
<!--发型2 先移动看不见的位置(10000 0)-->
<g transform="translate(10000 0)" ></g>
<!--发型3 先移动看不见的位置(10000 0)-->
<g transform="translate(10000 0)" ></g>
<!--发型4 先移动看不见的位置(10000 0)-->
<g transform="translate(10000 0)" ></g>
</g>
</g>2、换装逻辑
1、互动组（上面代码第6行），在用户进入时候应该是看不见的，所以里面的<g></g>直接移动到（10000，0）的位置。（为何是10000呢？等下再说）
2、图片移动到屏幕外了，用户就没法点击了？于是有下面代码，将需要被点击的移回来。
<g transform="translate(10000 0)" >
<!--页面载入时将rect移动到（-10000 0，刚好回到原来位置-->
<rect fill="#FFFFFF" height="135" opacity="0" style="pointer-events:visible;" transform="translate(-10000 0)" width="88" x="2" y="639"></rect>
</g>再互动操作区域有个RECT，再页面载入时自动反向移动到（-10000，0），这个区域允许用户点击；
3、用户点击这个区域后这组应该需要显示出来
<g transform="translate(10000 0)" >
<!--点击先移动看不见的位置(10000 0)-->
<animateTransform attributeName="transform" begin="click" calcMode="discrete" dur="1000s" fill="freeze" keyTimes="0;0.000001;1" restart="never" type="translate" values="0 0;-10000 0;-10000 0">
</animateTransform>
<!--页面载入时将rect移动到（-10000 0，刚好回到原来位置-->
<rect fill="#FFFFFF" height="135" opacity="0" style="pointer-events:visible;" transform="translate(-10000 0)" width="88" x="2" y="639"></rect>
<!--我要显示的图片放这里-->
<g>
<foreignObject height="874" style="" transform="matrix(0.345 0 0 0.345 0 509.365)" width="1000" x="0" y="0">
<svg class="gb faxing_1a" viewBox="0 0 1000 874"></svg>
</foreignObject>
</g>
<g></g><g></g><g></g><g></g>
</g> 关于10000说明
1、全部图片的宽度为10000，我认为这个标准很好；非常方便计算；
2、在SVG中采用矩阵函数，对图片进行等比缩放，保证不同手机不会图片模糊；
transform="matrix(0.345 0 0 0.345 0 1392.3101)"
函数参数说明
matrix(x轴缩放 0 0 y轴缩放 x轴位置 y轴位置)
如若转载，请注明出处：https://www.jinsizhu.com/10590.html
相关推荐
-
手机微信传文件到电脑，微信传文件到电脑显示接收中断？
手机、电脑作为日常较为常见且使用频率较高的消费类电子产品。某些情况往往需要将手机中的文件、照片、视频传输到电脑上进行处理，如果通过微信这种社交软件传输，会压缩我们的文件。那么，有什么样的快捷方式实现无数据线、无损传输呢？这里小编提供两种比较常用的方案！方案1、通过云盘，但不限于iCloud、百度网盘、小米云、华为云等；方案2、通过无线局域网的共享文件夹实
-
如何日入5000，日入500赚钱方法？
大家好！我是十一，一名90后，十年的职场人，每天和你分享我的故事和做自媒体干货知识，点击右上方“关注”期待和你一起做朋友，遇见更美的自己。 来头条已经一个多月的时间了，经过一段时间…
-
电脑微信怎么接龙怎么发起接龙，电脑微信怎么接龙表格？
最近因防疫封控要求，我们都在居家办公。由于我在做志愿者，我家80后娃妈每天除了按时视频办公、督促娃上网课，就是随时关注疫情动态。在严峻的疫情面前，看着微信群里满群的需求，无数焦虑的跟帖，以及那些无处寄托的期盼，近20年党龄的娃妈今天终于坐不住了，同我商量说要挤出时间组团做团购志愿者。我自然赞同。然而，网上各路团购信息虚虚实实，且
-
微信状态怎么设置听歌，微信状态怎么设置永久动态图？
之前有很多人吐槽，为啥微信看不出来好友是不是在线呢？上来问“在吗”太尴尬了！其实啊，在微信更新到8.0.16版本之后，微信状态就能以图标+文字的形式显示在昵称下方了。就像这样：那么这个时候我们就可以自定义一些新的玩法了。在【微信】-【我】-微信号下方点击【+状态】，拉倒最后选择【其他】，输入状态词【5
-
亚马逊如何推广新品，亚马逊如何推广新品类？
亚马逊卖家最想要的就是流量，有流量就意味着有曝光，曝光达到一定的数量自然有成交量。因此亚马逊引流工作非常重要，有哪些方法可以引流的呢？ 最基本的当然是先做好产品的页面，例如产品的图…
-
抖音封面比例是多少，抖音的封面比例是多少？
在我们刷抖音的时候，经常看到一些电视剧、电影的影视解说的几个视频封面连起来为一个整体，那么今天成都东涞职业学校就教你进行影视剪辑时如何制作三联屏封面！ 1、首先我们打开剪映，点击开…
-
手机微信折叠置顶聊天怎么关闭，微信折叠置顶聊天怎么关闭视频？
想必已经有许多小伙伴都知道，昨天微信又悄悄地发布了iOS微信8.0.14正式版然而让大家想不到的是，此次微信的更新可真和以往大不相同，那可是增加了一箩筐的新功能！除了之前提到过的关怀模式外，经过小编一天一夜的测试终于又发现了许多隐藏的新变化。接下来就一起来看看都有什么新变化吧，小伙伴们一定要认真看，可千万莫辜负了小编一
-
自媒体服装怎么做视频教程，自媒体服装怎么做视频教程图片？
离婚前的杜丽，绝对是人人羡慕的对象！从大学毕业后就结婚生子了。女儿已经4岁了，现在有阿姨带着。她每天就是打扮打扮自己，约约小姐妹逛街购物，或喝喝下午茶。 杜丽的老公 ，王博家里本来…
-
宝妈卖货的文案，宝妈卖货的文案怎么写？
类型是裙；图案是印花；裙下摆是荷叶边 1、这款睡裙精选优质的面料，不仅手感舒适，穿在身上还非常亲肤透气。荷叶边的设计也是一大亮点，衬显的这款睡裙更加甜美减龄。印花的设计也很经典百搭…
-
推广平台APP，推广平台app犯法吗？
使用过程介绍：在执行打击诈骗的过程中，警察和特工需要填写自己的区域地址（根据人口部门提供的对应区域、小区的对应位置），民警可以使用下拉菜单进行选择，仅需填写楼栋、单元、房号的数字。若对象为单位、学校、门面单位，则可填入住址。填好地址后，负责推销的民警手机