javascript - 鼠标移动动画

Question

您好，我正在努力实现这种效果http://mario.ign.com/modern-era/super-mario-3D-world没有 mousemove 我想用某种缓动效果来做它以使其平滑但实际上不知道如何实现去减速效果，到目前为止我所做的是这个 http://jsfiddle.net/xtatanx/8RB24/1/ :

var $container = $('#container');
var contWidth = $container.width();
var $point = $('.point');
var delay = 100;

$container.mousemove(function(e){
    clearTimeout(timer);

    var timer = setTimeout(function(){
        console.log(e.offsetX);
        $point.each(function(){
            if( e.offsetX > (contWidth - $point.width())){
                return;
            }
            var xp = $(this).position().left;
            xp += parseFloat((e.offsetX - xp)/ 20);
            $(this).css({
                left: xp
            });
        });
    }, delay);

});

但我认为动画感觉不像 mario site 那样流畅，如果你们能帮助我寻找资源或指导我实现这种效果，我将不胜感激。非常感谢。

Answer 1

您的不稳定是因为它仅在 mousemove 事件上运行。如果将它分成一个间隔(比如每秒 30 帧)，它会更平滑。这样即使在鼠标停止后它也会继续缓和。

var $container = $('#container');
var contWidth = $container.width();
var $point = $('.point');
var delay = 100;
var decay = .1;

var intervalId;
var mouseX, mouseY;

//this function is called 30 times per second.
function ticker(){
     $point.each(function(){
         if( mouseX > (contWidth - $point.width())){
             mouseX = (contWidth - $point.width()); //instead of returning, just set the value to the max
         }
         var xp = $(this).position().left;
         xp += parseFloat((mouseX - xp) * decay); //using a decay variable for easier tweaking
         $(this).css({
            left: xp
         });
     });
}

//this interval calls the ticker function every 33 milliseconds
intervalId = setInterval(ticker, 33); //33 millisecond is about 30 fps  (16 would be roughly 60fps)

$container.mousemove(function(e){
    mouseX = e.offsetX; //store the current mouse position so we can reference it during the interval
    mouseY = e.offsetY;
});