基于光标位置的变速Javascript动画

我想要实现的是一个基于光标位置的速度可变的javascript动画

对于这个问题，我使用jquery的animate函数、mousever事件和javascript的setInterval函数，但这些都不是必需的，所以如果有更好的方法来实现它，我会非常乐意听到（唯一需要的是javascript）

我面临的问题是，我不能简单地改变速度，出于某种原因，速度一直在增加，而不是设定我想要的速度，即使它会像预期的那样改变，但由于未知的原因，它也不会以一种平稳的方式发生

以下是我目前掌握的javascript：

//settings for container_slider. Are used in startSlider() which handles the animation
var steps_animation_speed = 1000;
var steps_interval = 1500;
var steps_speed_factor = 1;     // 100%
var amount_sliders = 3;

//cache DOM elements
var $container_slider = $('#container_slider');
var $shown_slides = $('.shown_slides', $container_slider);
var $slide = $(".slide");

// Just making sure sizing (widths) fits as they should.
var slides_width = $container_slider.width()/amount_sliders;
var slides_margin = parseInt($slide.css('marginLeft').replace('px', '')) + parseInt($slide.css('marginRight').replace('px', ''));
var steps_width = slides_width + slides_margin;
$shown_slides.css('width', steps_width*(amount_sliders+1) + 'px');
$slide.css('width', slides_width);

var interval;

// This function is responsible of the animation
function startSlider() {
    $shown_slides.stop(false);
    interval = setInterval(function() {
        $shown_slides.animate({'margin-left': '-='+steps_width}, steps_animation_speed*steps_speed_factor, function() {
            $('.shown_slides > li:last').after($('.shown_slides > li:first'));
            $('.shown_slides').css('margin-left', '0');
        });
    }, steps_interval);   
}

function pauseSlider() {
    clearInterval(interval);
}

$container_slider.mouseleave(function(){
    steps_interval = 3000;
    $shown_slides.stop(true);
    pauseSlider();
    startSlider();
});

// $container_slider.mouseenter(function(){
//  pauseSlider();
// });

$container_slider.mousemove(function(event){
    pauseSlider();
    var cursor_location = '';
    if(event.pageX > 0 && event.pageX < 165){
        cursor_location = "Cursor is on the left side";
        // This is where i'm doing the tests that should work of changing animation's speed based on cursor position
        if(steps_speed_factor !== (event.pageX / 165)){
            steps_speed_factor = event.pageX / 165;
            steps_speed_factor = (steps_speed_factor < 0.15 ? 0.15 : steps_speed_factor);
            steps_interval = 0;
            startSlider();
        }
    } else if(event.pageX > 165 && event.pageX < ($container_slider.width()-165)){
        cursor_location = "Cursor is in the center (paused)";
        // This stops animation, it could be achieved way better but i'm focusing on above's block of code.
        steps_speed_factor = 1;
        steps_interval = 3000;
        $shown_slides.stop(true);
        pauseSlider();
    } else if(event.pageX > ($container_slider.width()-165) && event.pageX < $container_slider.width()) {
        cursor_location = "Cursor is on the right side";
        // This would be an exact copy (almost) of the left side, but since it doesn't work yet, this is pretty  much a "blank" block of code
        steps_interval = 0;
        steps_speed_factor = ( event.pageX - ($container_slider.width() - 165) ) / 165;
    } 
    $(".coordinates").html("X: " + event.pageX + " Y: " + event.pageY );
    $(".cursor_location").html(cursor_location);
    $(".speed_factor").html("Speed Factor is: "+steps_speed_factor);
});

startSlider();

//容器\u滑块的设置。在处理动画的startSlider（）中使用
var步数\u动画\u速度=1000；
var步长间隔=1500；
var步进速度系数=1；//100%
可变金额\滑块=3；
//缓存DOM元素
var$container_slider=$（“#container_slider”）；
变量$show_slides=$（'.show_slides'，$container_slider）；
变量$slide=$（“.slide”）；
//只需确保尺寸（宽度）符合要求即可。
var slides\u width=$container\u slider.width（）/amount\u sliders；
var slides_margin=parseInt（$slide.css（'marginLeft'）.replace（'px'，''）+parseInt（$slide.css（'marginRight'）.replace（'px'，''））；
var steps_width=幻灯片宽度+幻灯片边距；
$show_slides.css（'width'，steps_width*（amount_slides+1）+'px'）；
$slide.css（'width'，slides\u width）；
var区间；
//此功能负责动画的制作
函数startSlider（）{
$show_幻灯片。停止（false）；
间隔=设置间隔（函数（）{
$show_slides.animate（{'margin-left'：'-='+步数_width}，步数_animation_speed*步数_speed_factor，function（））{
$（'.show_slides>li:last'）。在（$（'.show_slides>li:first'））之后；
$（'.show_slides'）.css（'margin-left'，'0'）；
});
}步数（u间隔）；
}
函数pauseSlider（）{
间隔时间；
}
$container\u slider.mouseleave（函数（）{
步距=3000；
$show_幻灯片。停止（true）；
pauseSlider（）；
startSlider（）；
});
//$container\u slider.mouseenter（函数（）{
//pauseSlider（）；
// });
$container\u slider.mousemove（函数（事件）{
pauseSlider（）；
变量游标位置=“”；
如果（event.pageX>0&&event.pageX<165）{
光标位置=“光标在左侧”；
//这就是我正在做的测试，应该根据光标位置改变动画的速度
如果（步长速度系数！==（event.pageX/165））{
步进速度系数=event.pageX/165；
步数速度系数=（步数速度系数<0.15？0.15：步数速度系数）；
步距=0；
startSlider（）；
}
}else if（event.pageX>165&&event.pageX<（$container\u slider.width（）-165））{
cursor_location=“光标位于中心（暂停）”；
//这停止了动画，它可以更好地实现，但我将重点放在上面的代码块上。
步进速度系数=1；
步距=3000；
$show_幻灯片。停止（true）；
pauseSlider（）；
}else if（event.pageX>（$container\u slider.width（）-165）和&event.pageX<$container\u slider.width（））{
光标位置=“光标在右侧”；
//这将是一个完全（几乎）左侧的副本，但由于它还不能工作，这几乎是一个“空白”代码块
步距=0；
步骤速度系数=（event.pageX-（$container\u slider.width（）-165））/165；
} 
$（“.coordinates”）.html（“X:+event.pageX+”Y:+event.pageY）；
$（“.cursor\u location”）.html（cursor\u location）；
$（“.speed\u factor”）.html（“速度因子为：”+steps\u speed\u factor）；
});
startSlider（）；

显示此javascript代码“正常工作”

---编辑

我忘了恰当地解释代码笔中发生了什么，因为它只是一个例子，没有给予它太多的重要性。主要应该发生的是，光标离中心越远，动画的翻转越小/越快，而不会失去流畅性

---

在本例中，我使用了一个“速度因子”，通过获取光标的X位置，然后将其与预定义区域进行比较，将其从15%转换为99%的百分比（十进制）。但实际上这并不是重要的部分。我对如何实现这一点一无所知，我越是尝试我的代码就越混乱，所以只要你能给我一个基于光标位置改变动画速度的例子（实时，我的意思是平滑/流畅），作为一个例子，这将是完美的

你想让积木像那样开始和停止吗？或者运动应该是连续的？对不起，我没有正确解释它（我会编辑它）。我想要的是，基于光标和中心之间的距离，动画以更小的间隔出现。距离中心越远，系数越高，间隔应越快。是的，我希望它以连续的运动发生。