缓动函数不适用于 svg.js v3 旋转

Question

包信息

"@svgdotjs/svg.js": "^3.0.16",
"svg.easing.js": "svgdotjs/svg.easing.js"

问题所在

有人可以澄清如何使用 svg.js v3 库使用缓动函数正确设置旋转动画吗？

https://svgjs.dev/docs/3.0/animating/中的文档没有给出任何示例，我已经尝试了许多不同的方法来使其工作，但所有尝试都会导致默认行为">"(又名缓出函数(。插件文档也不是冗长的(https://svgjs.dev/docs/3.0/plugins/(，并且没有提供有关如何利用插件(如svg.easing.js库(的说明。安装该包也不会更改结果。

我的尝试

const mySvg = SVG(<svg>...</svg>)
const rotatable = mySvg.find('#rotatable');
rotatable.animate(3000, '<>').rotate(360);
rotatable.animate(3000, 'easeInOut').rotate(360);
rotatable.animate({ duration: 3000, ease: '<>').rotate(360);
rotatable.animate({ duration: 3000, ease: 'easeInOut').rotate(360);
// Defining an actual easing function for easeInOut
rotatable.animate({ duration: 3000, ease: function(pos) { return (-Math.cos(pos * Math.PI) / 2) + 0.5; }}).rotate(360);
// Providing the function as a string, since that's what `animate` seems to expect
rotatable.animate({ duration: 3000, ease: 'function(pos) { return (-Math.cos(pos * Math.PI) / 2) + 0.5; }'}).rotate(360);

以上方法均未按预期工作。我已经在<g>和<path>元素上使用了它们，并且两者都导致相同的行为，即缓出(而不是缓入和缓入 - 甚至只是缓入(。

非常感谢任何帮助，因为使用此库绝对对所有其他方面都非常有帮助！

Answer 1

即使文档落后于一个清晰的例子(抱歉(，您也可以找到以下内容：

动画的缓动可以使用运行器的 ease(( 方法进行更改。

所以你可以打电话给el.animate(...).ease('<>')，这应该可以解决问题