如何沿弧线为图像设置动画

Posted 2023-05-08

【中文标题】如何沿弧线为图像设置动画

【英文标题】：How to animate an image along an arc

【发布时间】：2013-11-08 08:03:03

【问题描述】：

我想沿弧线的路径为图像制作动画。这条弧线是圆周长的 45o 段。

我了解以前最简单的方法是使用 https://github.com/weepy/jquery.path，但此代码似乎已失效（演示不再适用于 Chrome）。

否则我该怎么做？

【参考方案1】：

您可以在动画中使用step 回调来制作您自己的自定义效果。动画一些没有可见效果的属性，并从中设置坐标：

$('div').css( fontSize: 0 ).animate(
    fontSize: 45
,
    duration: 2000,
    easing: "swing",
    step: function(t, fx)
        var a = t / 57.296; // from degrees to radians
        var x = 100 + Math.cos(a) * 50;
        var y = 100 + Math.sin(a) * 50;
        $(this).css( left: x, top: y );
    
);

演示：http://jsfiddle.net/Guffa/a9eXE/

【讨论】：

谢谢，如何设置度数或圆半径？

@alias51：示例从0度到45度循环，半径为50，圆心为100100。

太好了，谢谢。有什么可以让这更顺畅吗？在我的浏览器（Chrome 30）中它有点生涩。

@alias51：据我所知，浏览器会将坐标四舍五入到最近的像素，这使得路径有点锯齿状。如果您查看 jQuery.path 演示中较慢的元素之一，您会发现它们实际上并没有平滑移动，但是有太多元素在移动，除非您寻找它，否则您看不到它。跨度>

@Guffa 有一种方法可以平滑它：缓动。如果你在 jQuery 中使用默认的缓动，你可能不会总是得到最好的结果。如果您还使用 jQuery UI，您将获得更多提供更好动画的选项。我在小提琴中所做的只是添加了 jQuery UI 和一定的缓动，它非常流畅：jsfiddle.net/6mn7Loms 如果它加速到 1000 毫秒，它看起来会更好