缓动函数不适用于 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/ gives no examples, and I have tried many different ways to get it to work, but all attempts result in the default behavior, '>' (aka the ease-out function). The plugins documentation is also not verbose (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);

None 上述工作按需要进行。我在 <g> 和 <path> 元素上使用了它们，两者都导致了相同的行为，即只是缓出（而不是缓入和缓出 - 或者甚至只是缓入）。

非常感谢任何帮助，因为使用这个库肯定对所有其他方面都非常有帮助！

Answer 1

尽管文档滞后于一个明显的示例（抱歉），您还是可以找到：

The easing of the animation can be changed with the ease() method of the runner.

所以你可以调用 el.animate(...).ease('<>')，这应该可以解决问题

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

Easing Functions Not Working with svg.js v3 Rotate

animation

svg

easing-functions

easing

svg.js

包裹信息

问题

我的尝试