公众号svg动画,svg公众号互动

svg支持哪三种类型的动画

CSS3动画，javascript动画(canvas)，html动画(SVG)。svg支持三种类型的动画分别是CSS3动画，javascript动画(canvas)，html动画(SVG)，SVG指可伸缩矢量图形，是使用XML来描述二维图形和绘图程序的语言。

公众号上的动图用什么格式

公众号上的动图用gif格式。

GIF的英文全称是“Graphics Interchange Format”，直译就是“图像互换格式”。GIF起源于1987年，最初命名87A，因其体积小、成像相对清晰的特点在互联网上大受欢迎，它的原理很简单，其实就是将多张图像保存为一张图像文件，从而形成动画的形式。

由于GIF动图无损特性，制作后很容易变大，以至于早期很多平台的GIF图的内容很少，就算有那么限于256色图像色彩也并不丰富。随着新媒体的发展，微信、知乎、头条、微博等平台逐步放宽对GIF图的限制，从最早的1M逐步放宽到10M甚至20M，给予GIF图更大的施展空间。

[CSS] svg路径动画

在制作CSS动画的时候，经常会有这样的需求，

让一个方块 沿着给定的路径 运动。

如果运动路径是不规则的，通过设置 top ， left 的属性值，就显得非常困难了。

这时候可以借助svg来实现。

path 元素的形状是通过它的 d 属性 定义的，

d 属性的值，是一个“命令+参数”的序列。

其中， M 20 30 L 160 180 ，包含了2个命令序列，

M 20 30 ，表示将画笔移动到坐标 20,30 处，

L 160 180 ，表示从画笔当前位置，到 160,180 位置画直线。

path元素支持多种命令，可以参考这里， curve commands

html元素的CSS样式属性 offset-path ，表示 偏移路径 。

通过指定 offset-path 的值为path元素的 d 属性值，我们可以实现元素沿着给定的 path 路径运动。

其中， offset-distance 指定了元素偏移初始位置的百分比。

通过在 @keyframes 中逐帧更改 offset-distance ，可以实现动画效果。

我们修改path的 d 属性为 M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 ，

相应的也修改小方块的 offset-path 属性。

就可以实现小方块沿着path运动的效果了。

MDN: paths

MDN: offset-path

MDN: offset-distance

A How-to Guide to SVG Animation

Scalable Vector Graphics (SVG) 2 - Chapter 9: Paths