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

【问题标题】：CSS transform with SVG and anime.js使用 SVG 和anime.js 进行CSS 转换
【发布时间】：2018-02-23 19:01:18
【问题描述】：

我在做什么

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

我的期望

我希望圆圈从 svg 路径的一端开始，并在另一端结束。

实际情况

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

当我点击动画时，圆圈会跳到不同的位置，然后动画几乎正确，然后在错误的位置结束。

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

for(var c = 0; c < this.coins.length; c++){
  var path = anime.path('#path-'+ c);
  anime({
    targets: document.getElementById(this.coins[c].ref),
    translateX: path('x'),
    translateY: path('y'),
    rotate: path('angle'),
    duration: 1000,
    delay : this.coins.length * 100 - (100 * c),
    easing: 'easeInOutQuad',
    rotation: 0,
  });
  }

我知道它几乎肯定与transform-origin 以及应用于圆圈的旋转变换有关，但我无法理解它。

【问题讨论】：

标签： css svg anime.js

【解决方案1】：

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

for(var c = 0; c < this.coins.length; c++){
  var path = anime.path('#path-'+ c);
  anime({
    targets: document.getElementById(this.coins[c].ref),
    cx: path('x'),
    cy: path('y'),
    duration: 1000,
    delay : this.coins.length * 100 - (100 * c),
    easing: 'easeInOutQuad',
    rotation: 0,
  });
  }

这是一个演示：

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

【讨论】：