使用SVG和anime.js进行CSS转换

Question

我正在做什么

我使用anime.js为svg中的路径设置一些圆圈的动画。我使用Vue创建路径，因为我希望顶部的圆圈最终位于底部，因此它不能只是一个静态SVG。

我的期望

我希望圈子从svg路径的一端开始，然后在另一端完成。

实际发生了什么

我在这里有一个演示： https://codepen.io/EightArmsHQ/pen/paVxpd

当我点击动画时，圆圈会跳到另一个位置，然后几乎正确地制作动画，然后在错误的地方完成。

这是我用于anime.js的代码：

transform-origin

我知道它几乎肯定与// Constuct your word array let searchList = ['foo', 'bar']; // Iterate through the word list searchList.forEach(function (searchWord) { return Word.run(function (context) { // Tell word for search for a word let searchResult = context.document.body.search(searchWord); // Load the properties for the result context.load(searchResult); // Execute the batch return context.sync() .then(function () { // Loop through the results searchResult.items.forEach(function (result) { // Write them to the console console.log(result.text); }); }); }); }); 以及应用于圆圈的旋转变换有关，但我无法理解它。

Answer 1

我在经过一些实验后发现问题是我正在改变transformX和transformY属性，虽然它有点工作并且对DOM元素更有效，但我应该使用cx和{{1属性。我也删除了cy。

rotation

这是一个演示：

https://codepen.io/EightArmsHQ/pen/aqKXrQ?editors=1010