新媒体运营技能| SVG图文交互基础 01

我们把SVG交互设计想象成作画的过程，假设一个100*100像素的画布。

<circle>...</circle>

绘制一个圆形，只需要知道圆心坐标和半径。

circle 圆

cx圆心横坐标

cy 圆心纵坐标

r 半径

fill是填充色

stroke 描边

stroke-width 描边宽度

颜色可以有三种表达方式，例如红色怎么表示？

①颜色英文 例如：fill="red"

②16进制 例如：fill="#ff0000"

③RGB 例如 ：fill="rgb(255,0,0)"

<rect>...</rect>

绘出一个矩形，需要起始位置坐标（x和y），和宽度（width），高度（height）。

注意：当width="100%"的时候，画布是整个网页的宽度。

矩形的起点坐标，就是矩形的左上角的坐标。

注意：x 、y、width、height可以单独变化，也可以一起变化。

<animate attributeName="x" from="50" to="250" dur="3s" repeatcount="2" fill="remove">

动画元素<animate>...</animate>

attruibuteName 属性名

from 初始值

to 终值

dur 持续时间

repeatcount重复次数

①可以填入具体的数值，例如2，就表示动画重复2次

②可以填入“indefinite”,表示无限循环

fill=" "

①remove 动画结束后保持在起始位置

②freeze 动画结束后保持在终止位置

圆形动画，圆的半径可以变化

<animate attributeName="r" values="507090" keyTimes="00.21" dur="4s">

</animate>

values="507090" 圆的半径 从50->70->90

格式

values="参数1参数2参数3......."

可以看出来可以定义动画的多个关键帧，而from 和to来只能定义参数的起始和结束。

keyTimes="00.21"

keytimes 在默认的状态下，第一个时间值为0，最后一个时间值为1。是values对应的时间分配比

意思就是，半径50->70动画分配 4x0.2=0.8s的时间，70->90，分配了4 x0.8=3.2s的时间。

如何让用户保持持续注意力接纳内容信息，是微信图文里一直关注的问题。近期 「我备用」 为 「微信派」 开发了一篇具有流畅阅读体验的推送交互图文《2021全球追光！一起来看新年的第一个日出》，现在为大家分享这篇推送技术逻辑。若想体验一下丝滑版的图文阅读体验，可以看看这篇推送。

在这篇图文推送中将前景与背景按照一定方式进行融合， 利用的前景图悬浮、背景图纵向运动的技术逻辑 ，营造出界面里惊艳的视觉效果。在这里最关键在于前景与背景的融合关系，通常情况下，两个图层之间的组合运动都是100%遮罩效果，即两个并列section盒子里要执行某些交互触发下个盒子的信息，而最开始的盒子为了输出更多信息主动让位界面或者用户会被延展出的信息区域吸引进而忽略。但在 该篇推文里中利用PNG图片的透明属性，设置前景悬浮效果，并融合背景图运动变化呈现不同以往的信息传递路径 。同时信息呈现在一个界面里，不仅提供了高效的信息输出空间，而且帮助文章保持一致氛围和流畅的阅读体验。

除此之外，与图文内容的巧妙结合，发挥了此技术逻辑的最大效能。背景呈现从星空到日出的变化过程，营造出星空流动以及人在追逐时天空相对运动的过程，完美契合文章的“追光”主旨，带给人视觉感官体验，并不断深化用户对于主题的认知。

无论技术还是形式，最终还是服务于内容。通过一图层悬浮另一图层纵向变化的组合，近期别克推送中也使用到了，以不一样的形式将该类技术逻辑展现出来。不妨再一起体验下。

区别于上一篇图文形式，别克的推送里是保持背景图层的不变，通过前景PNG图片的向下展开的运动效果，引导用户的阅读注意力。 在这里前景图层的元素形成了交互界面里与用户沟通的指示性符号，完美充当了「意符」的概念，用户无需明显提示跟随图文高度展开时自动跟随元素向下移动，进一步提高了整篇推送的阅读完整率，使整篇文章阅读体验非常流畅，顺其自然。

---