svg动画类库Snap.svg简介

Posted 2023-03-15

参考技术A

SVG元素是一种特殊的DOM元素，可以使用CSS以及一般的JS类库来实现动画控制。但是这些方法都没提供SVG动画样式属性的完整控制，现在介绍一个专门的SVG动画类库Snap.svg，其github地址为： https://github.com/adobe-webplatform/Snap.svg

Snap.svg提供多种安装方式。

功能描述： 创建或加载已有的SVG元素。
参数说明：

返回值： SVG元素

功能描述： 根据JS选择器加载SVG元素内已有的图形元素。
参数说明：

返回值： 选择器命中的元素Element，当存在多个命中的元素时，只返回第一个元素

功能描述： 在SVG元素内绘制一个圆。
参数说明：

返回值： 新建的circle元素Element

功能描述： 在SVG元素内绘制一条Path。
参数说明：

返回值： 新建的path元素Element

功能描述： 在SVG元素内绘制一个矩形。
参数说明：

返回值： 新建的rect元素Element

功能描述： 在一段时间内匀速变更相关属性到目标值。
参数说明：

返回值： 动画对象

功能描述： 根据设置的参数，执行动画操作。
参数说明：

返回值： mina格式的动画对象

功能描述： 执行位移操作。
参数说明：

功能描述： 使推行围绕指定的圆心，旋转一定角度。
参数说明：

初始化参考上面“基本实现步骤”中的相关描述，后续只描述动画控制部分。

《Snap.svg API文档》
《使用 Snap.svg 制作动画》