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

本文为《硬核运营》svg部分的学习实践

微信公众平台支持的动画类型

序号	元素	属性名称	备注
1	animate	x	起点坐标
2	animate	y	起点坐标
3	animate	width	宽
4	animate	height	高
5	animate	r（半径）	cx ,cy（圆的中心坐标）
6	animate	opacity	不透明度
7	animate	d
8	animate	points
9	animate	stroke（描边）	stroke-width , stroke-dassoffset, stroke-linecap
10	animate	fill	填充颜色/动画状态
11	set	visivility	可见性
12	animateTransform	translate	位移
13	animateTransform	transform
14	animateTransform	scale
15	animateTransform	raotate	旋转
16	animateTransform	skewX	倾斜
17	animateTransform	skewY	倾斜
18	animateMotion	-	path, rotate, keypoints, mpath

摊开一张画布

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

<svg height="100" width="100">  
</svg>

圆形

<circle>...</circle>
绘制一个圆形，只需要知道圆心坐标和半径。

circle 圆
cx圆心横坐标
cy 圆心纵坐标
r 半径
fill是填充色
stroke 描边
stroke-width 描边宽度

颜色可以有三种表达方式，例如红色怎么表示？
①颜色英文 例如：fill="red"
②16进制 例如：fill="#ff0000"
③RGB 例如 ：fill="rgb(255,0,0)"

<svg height="100" width="100">
    <circle cx="50" cy="50" r="30" fill="#ec6969" stroke="green" stroke-width="2" >
    </circle>
</svg>

圆形

矩形

<rect>...</rect>

<!--rect   矩形元素-->
<svg width="100%" height="200">
    <rect x="10" y="10"  width="300" height="150"  style="stroke:green;stroke-width:5;fill:red" id="1.2">
    </rect>
</svg>

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

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

矩形

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

ppt演示从左上角画出一个矩形

矩形动画

<!--矩形动画-->
<svg width="250" height="250" id="1.3">
    <rect x="50" y="50" width="100" height="100" fill="gray">
        <animate attributeName="x" from="50" to="250" dur="3s"  repeatcount="2" fill="remove">
        </animate>
        <animate attributeName="y" from="50" to="250" dur="3s"  repeatcount="2" fill="remove">
        </animate>
    </rect>
</svg>

注意：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 动画结束后保持在终止位置

矩形动画.gif

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

<!--圆形动画-->
<svg  width="500" height="500" id="1.5">
    <circle  cx="100" cy="100" r="50" fill="#ff0000">
        <animate attributeName="r" values="50;70;90" keyTimes="0;0.2;1" dur="4s">
        </animate>

    </circle>
</svg>

圆形动画.gif

<animate attributeName="r" values="50;70;90" keyTimes="0;0.2;1" dur="4s">
</animate>

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

格式
values="参数1;参数2;参数3......."
可以看出来可以定义动画的多个关键帧，而from 和to来只能定义参数的起始和结束。

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

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

饿了 ，明天再写