Question

我正在尝试创建旋转并以特定角度停止的指南针。一切似乎工作正常，但由于我试图模拟真正的船的指南针，添加一些缓和将是很好的。这就是我无法克服的问题。这是旋转指南针直到达到所需路线的功能（在本例中为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和更酷的动画和过渡

这是使用一些内置缓动函数导入library后的代码：

$('your_element_using_css_selectors').transition({ rotate: '[num_deegrees]deg' }, your_time_milis, "your_easing_function");

e.g。

$('#myComponent').transition({ rotate: '95deg' }, 700 , "easeInOutExpo");

其中easeInOutExpo是easing函数。查看页面链接以便更好地理解。

Answer 2

是的，用Jquery Transit旋转图形真的很容易。我创建了一些脚本来说明这个概念：

<!DOCTYPE html>
<html>
<head>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.min.js"></script>
<script>
$(document).ready(function() {
$('#button').on('click', function () {
$('h1')
  .transition({ rotate: '180deg' }, 2000 , "easeInOutBack");
});
});
</script>
</head>
<body>
<button id="button">ROTATE Compass!</button>
<h1   style="position:absolute;   left:22px; top: 50px;">Rotate me</h1>
</body>  
</html>

我注意到easeInOutElastic不适用于Jquery Transit。我使用了easeInOutBack，但是easeInOutElastic会更加真实。在从Java Script中获取数据方面。我创建罗盘的方式如下：罗盘旋转1度，直到达到预定角度。因此，在数值数据中显示当前角度非常容易。显然，我不能用Jquery Transit以这种方式做到这一点，或者至少我不知道如何做到这一点。有任何建议如何使用Jquery？谢谢罗伯特

使用JavaScript缓解动画

2 个答案: