javascript - 使用 jQuery.animate() 沿曲线同步旋转图像

标签 javascript jquery html jquery-animate curve

jQuery.animate() 如何确定执行其功能所需的“帧”数?我以为这个( Fiddle )会在 2 秒内执行 90 次调整,但最终执行了 150 次。

这使得导弹的 Angular 旋转与曲线同步变得困难。我希望它以这个速度或更慢,但进一步减慢只会增加旋转效果。要查看其显示方式(大致),请将 duration: 2000 更改为 1250。

更新:令人费解的是,Fiddle 似乎只能在 Chrome(而不是 Firefox)中工作。不知道为什么。

最佳答案

正确的方法是使用jquery提供的progress回调函数。请参阅文档:http://api.jquery.com/animate/ ,并在其中使用它为您提供的参数;

$thing.animate({left:100},{progress:function(animation, progress, remaining){
    // do stuff with progress
}});

(已编辑:抱歉,是进度而不是步骤)

这是您的 fiddle 的更新:http://jsfiddle.net/a9eXE/78/ (我实际上在那里使用步骤,只是因为它更容易获得当前的补间进度,并且当您仅对单个属性进行动画处理时,这没有什么区别)

关于javascript - 使用 jQuery.animate() 沿曲线同步旋转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21215081/

相关文章:

javascript - 强制 Aurelia 使用相同组件但不同路由参数调用新路由的生命周期方法

javascript - 一个页面上的多个 jQuery slider 无需重复代码

php - 将 & 号插入 MySQL 的问题

jquery - 将 HTML 标签替换为新标签

java - 从 onchange 值显示多个具有相同 id 的 div 或 table 内容

javascript - Jquery,单击时获取该元素的文本并将其存储在变量中

javascript - Jquery 隐藏/显示加载更多按钮

javascript - 如何在 Highcharts 中围绕 Solid Gauge 制作刻度线

javascript - 如何使用 React Router 设置仅激活一个链接以实现多个 url 状态?

jquery - 如何扭曲图像