我正在尝试创建可以旋转并停止在特定 Angular 指南针。一切似乎都工作正常,但由于我正在尝试模拟真正的船罗盘,所以添加一些缓动会很好。这就是我无法克服的问题。 以下是旋转罗盘直到达到所需航向(本例中为 90 度)的函数:
function rotate(el,speed) {
var elem = document.getElementById(el);
elem.style.transform = "rotate("+degrees+"deg)";
looper = setTimeout('rotate(\''+el+'\','+speed+')',speed);
if ( degrees == 90 ){
clearTimeout(looper);
}
}
我将不胜感激任何帮助。 谢谢 罗伯特
最佳答案
假设您正在使用 JQuery
,我建议使用 Jquery Transit插件极其易于使用,支持 2D、3D 动画和过渡以及更酷的东西。
这将是使用其一些内置缓动函数导入库
后的代码:
$('your_element_using_css_selectors').transition({ rotate: '[num_deegrees]deg' }, your_time_milis, "your_easing_function");
例如
$('#myComponent').transition({ rotate: '95deg' }, 700 , "easeInOutExpo");
其中 easeInOutExpo
是 easing
函数。查看页面链接以更好地理解。
关于javascript - 使用 JavaScript 缓动动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34476526/