新媒体运营黑科技| SVG图文交互基础 02

今天继续微信图文互动svg基础知识，内容来源自《硬核运营》实践

keytimes属性

keytimes 是对values值的时间分配比。
例如：下面这个矩形位移动画，总时间3s。去程时间4* 0.8=3.2s，回程时间4* 0.2=0.8s。

<!--keyTimes属性-->
<!--keyTimes属性，默认第一个值是0，最后一个值是1-->
<svg width="100%"  height="100">
    <rect x="20" y="20" fill="#ec6969" width="100" height="60">
        <animate attributeName="x" values="20;150;20"  dur="3s" keyTimes="0;.8;1">
        </animate>
    </rect>
</svg>

keytimes.gif

keyTimes列表的语义取决于calcMode（插值模式）

插值模式（calcMode）	含义	keyTimes属性设置
linear (默认值)	每个时间段内均匀变化	keyTimes列表第一个时间值为0，最后一个时间值为1
spline	配合keySplines属性，设置缓动函数效果	keyTimes列表第一个时间值为0，最后一个时间值为1
discrete【离散】	没有中间过渡，在对应时刻呈现对应效果	keyTimes列表第一个时间值为0
paced	根据values数值均匀变化	无视keyTimes属性

总结：默认情况下，keyTimes列表第一个时间值为0，最后一个时间值为1 。

opacity 不透明度属性

<!--opacity 不透明度-->
<svg  width="100%" height="100">
    <circle cx="50" cy="50" r="50" fill="red" opacity="1">
    <!--默认图形的opacity=1，即图形是显示的-->   
        <animate attributeName="opacity" values="1;0;1" dur="3s" begin="1s" repeatcount="indefinite">
        </animate>
    </circle>
</svg>

svg的opacity属性

opacity ="1" 不透明度最大，也就是可见的。

opacity="0" ，不透明度最小（透明度最大），不可见。

多边形

01 封闭多边形属性 polygon

poly就是很多的意思，gon 就是角度的意思。

<!--封闭多边形polygon-->
<svg width="100%" height="100">
    <polygon  points="50,50 100,50 100,100 50,100" fill="#888888" stroke="red" stroke-width="1">
        <animate attributeName="points" values="50,50 100,50 100,100 50,100;50,50 100,50 120,100 30,100" dur="2s" fill="freeze" >
        </animate>

    </polygon>
</svg>

points="50,50 100,50 100,100 50,100"是4边形的4个坐标（50,50）（50,100）（100,100）（50,100）
从坐标可以看出来，初始图形是一个正方形。

坐标格式
同一组不同的坐标用空格隔开。两组坐标用分号隔开。例如：初始坐标和动画后坐标就是用分号隔开。

svg封闭多边形

02 折线多边形 polyline

polygon和polyline最大的区别就是，前者是封闭的图形，而后者是点的连线路径，是不封闭的。

如果polyline要形成封闭的图形，需要起点坐标和终点坐标一样。就跟用笔画一个正方形一样,笔尖从起点出发，最后回到起点，这样才是一个封闭的图形。

<!--折线多边形polyline-->
polyline折线,是不封闭的。
<svg  width="150" height="150">
    <polyline points="50,50 100,50 100,100 50,100"  fill="none" stroke="red" stroke-width="1">
    </polyline>
</svg>

起点坐标和终点坐标一样，才能形成封闭图形
<svg  width="150" height="150">
    <polyline points="50,50 100,50 100,100 50,100 50,50"  fill="none" stroke="red" stroke-width="1">
    
    </polyline>
</svg>

svg的polyline和polygon的区别

描边属性 stroke

首先学习几个单词
dash 破折号
array 数组
offset 偏移量
所以，dasharrey 虚线（虚线就是很多破折号）

①实线描边

<svg width="300" height="150">
    <rect  x="50" y="50" width="100" height="60" fill="#888888" stroke="green" stroke-width="1">
        <animate attributeName="stroke-width" values="3;5;1" dur="2s" fill="freeze" >
        </animate>
    </rect>
</svg>

描述：正方形的描边宽度动画，初始描边宽度stroke-width="1",在2秒内，从3->5->1

stroke-width.gif

② 虚线描边 storke-dasharrey

stroke-dassarray="值1 值2" 我们知道虚线由【实线段】和【空隙】构成。值1就是实线段的长度，值2就是空隙长度。

<svg width="300" height="150">
    <rect  x="50" y="50" width="100" height="60" fill="#888888" stroke="red" stroke-width="2" stroke-dasharray="15 20">
        <animate attributeName="stroke-dasharray" values="15 20;20 35" dur="1s" repeatcount="indefinite">
        </animate>
    </rect>
</svg>

描述：1s内，虚线描边的实线段长度 15->20,空隙 20->25变化。

stroke-dasharray.gif

stroke-dashoffset 虚线描边的偏移量

如何理解这个偏移量呢？

<!--默认没有偏移量，即storke-dassoffset="0"-->
<svg width="300" height="150">
    <rect  x="50" y="50" width="100" height="50" fill="#888888" stroke="red" stroke-width="2" stroke-dasharray="100 400" >
    </rect>
</svg>

注意：这个矩形周长是300，所以 虚线间隔≥300，就只能看到一条线。可以利用这个实现描边动画，后面讲。

偏移量为0 正反方向.png
上图来源：https://blog.csdn.net/sillies_3/article/details/90607648

偏移量为正

偏移量为正，从偏移量为0的位置开始，向反方向偏移（逆时针）。

<svg width="300" height="150">
    <rect  x="50" y="50" width="100" height="50" fill="#888888" stroke="red" stroke-width="2" stroke-dasharray="100 300" stroke-dashoffset="0">
        <animate attributeName="stroke-dashoffset" values="0;100" dur="3s" fill="freeze" repeatcount="1" >
        </animate>
    </rect>
</svg>

偏移量为正.gif

偏移量为负

偏移量为负，从偏移量为0的位置开始，正方向偏移（顺时针）

<svg width="300" height="150">
    <rect  x="50" y="50" width="100" height="50" fill="#888888" stroke="red" stroke-width="2" stroke-dasharray="100 300" stroke-dashoffset="0">
        <animate attributeName="stroke-dashoffset" values="0;-100" dur="3s" fill="freeze" repeatcount="1" >
        </animate>
    </rect>
</svg>

偏移量为负.gif

总结：偏移量数值的正负，和偏移方向刚好相反。

描述：这是一个宽100，高50的长方形。虚线长度是300，

虚线描边动画

这个有点深度，学好了可以非常牛皮。关键在于路径的表达，如果你用路径表示一个房子，那么用描边动画就会形成用笔画房子的动画。

实线长度=间隔长度=路径长度=偏移量，这个描边动画的临界条件。
简单点说，就是虚线中的实线段贯穿全程，而看不见空隙。

虚线描边动态效果

<!--虚线动态描边效果-->
<svg width="300" height="150">
    <rect  x="50" y="50" width="100" height="50" fill-opacity="0" stroke="red" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="0">
        <animate attributeName="stroke-dashoffset" values="300;0" dur="3s" repeatcount="1">
        </animate>
    </rect>
</svg>

我们按照矩形路径，描边就会如图所示。

描边动画.gif

所以，如果用代码写出心形路径，就会绘画出一个心型，再加上表白词。绝对是一个表白利器。不说了，为了摆脱单身，我要去学习了。

未完待续