投稿

微信制作推文的软件（手机微信推文制作软件）

用户投稿 • • 网络资讯 • 阅读 576

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轴位置)

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 sumchina520@foxmail.com 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.sumedu.com/faq/201406.html
赞 (0)
用户投稿
0 0
上一篇 2022年7月22日 19:24
下一篇 2022年7月22日 19:36

相关推荐