【笔记】Snapsvg学习笔记

发表于 更新于 阅读次数：

前言

The JavaScript SVG library for the modern web（官网）

引入依赖

1
<script src="https://unpkg.com/snapsvg@latest/dist/snap.svg-min.js"></script>

获取Snapsvg对象

创建Snapsvg对象

1
const snap = Snap(300, 150);

通过id选择器获取HTML的DOM中的SVG

1
2
3
4
5
<svg id="svg"></svg>

<script>
  const snap = Snap("svg");
</script>

通过Snap对象向HTML的DOM中添加SVG

1
document.body.appendChild(snap.node);

在SVG中绘制图形

1
const react = snap.react(10, 10, 10);

从SVG中获取图形

1
2
3
4
5
6
7
8
<svg id="svg">
  <rect id="react" x="10" y="10" width="10" height="10"></rect>
</svg>

<script>
  const snap = Snap("svg");
  const react = snap.select("#react");
</script>

修改SVG中图形的属性

1
2
3
react.attr({
  fill: "red"
});

为SVG定义动画

  • 将起始值到开始值根据频率切分为一组值，根据函数调用频率调用回调函数，回调函数的形参为当前切分得到的值
1
2
3
4
5
6
7
8
Snap.animate(
  0, // 起始值
  10, // 截止值
  function (value) { // 回调函数
    console.log(value);
  },
  1000 // 函数调用频率，单位毫秒
);

时间曲线

mina.linear：匀速

1
2
3
4
5
6
7
8
9
10
Snap.animate(
  0, // 起始值
  10, // 截止值
  function (value) { // 回调函数
    console.log(value);
  },
  1000, // 函数调用频率，单位毫秒
  mina.linear, // 时间曲线
  function () {} // 调用结束的回调函数
);
  • 如果回调函数是数组，则数组中只能定义数值类型的值
1
2
3
4
5
6
7
8
9
Snap.animate(
  [0, 0], // 起始值
  [10, 10], // 截止值
  function (value) { // 回调函数
    console.log(value[0]);
    console.log(value[1]);
  },
  1000 // 函数调用频率，单位毫秒
);

完成