Question

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

对于那个porpouse，我正在使用jquery的animate函数和mousever事件以及javascript的setInterval函数，但这些并不是必需的，所以如果有更好的方法来实现它，我会非常乐意听到它（唯一的） requeriment将是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();

Here is a codepen显示此javascript代码“正常工作”。

---编辑

我忘了准确地解释在codepen中发生了什么，因为它只是一个例子并没有给它太重要。主要应该发生的是光标距离中心越远，动画的不连续性越小越快，而不会失去流动性。

在这种情况下，我使用“速度因子”，我通过取光标的X位置然后将其与预定义区域进行比较，将其以百分比（十进制）从15％转换为99％来计算。但它实际上并不是重要的部分。我对如何实现这一点毫无头绪，而且我尝试的代码越多越好，所以只要你能给我一个改变动画速度的例子（在“实际”时间，我的意思是，流畅/流畅）基于以光标的位置为例，它将是完美的。

基于游标位置的可变速度的Javascript动画

0 个答案: