javascript - 使用 JavaScript 缓动动画

Question

我正在尝试创建可以旋转并停止在特定 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);       
            }
}

我将不胜感激任何帮助。谢谢罗伯特

Answer 1

假设您正在使用 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 函数。查看页面链接以更好地理解。