鼠标移动动画 [英] Mousemove animation

问题描述

您好我想才达到这种效果的http：//马里奥。 ign.com/modern-era/super-mario-3D-world 的鼠标移动没有我想用某种效果轻松做到这一点，使之光滑，但实际上不知道如何才达到日desaceleration效果，到目前为止我所做的就是这个 http://jsfiddle.net/xtatanx/8RB24/1/：

Hello I am trying to achive this effect http://mario.ign.com/modern-era/super-mario-3D-world no mousemove I would like to do it with some kind of ease effect to make it smooth but actually dont know how to achive de desaceleration effect, so far what I've done is this 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);

});

但我认为，动画犯规觉得马里奥网站，我会AP preciate如果你们能帮助我ginding资源或指导我达到这个效果流畅。非常感谢你。

But I think that the animation doesnt feel as smooth as mario site i would appreciate if you guys could help me ginding resources or guiding me to achieve this effect. Thank you very much.

推荐答案

您抖动现象，因为它是在mousemove事件仅仅运行。如果你打破它成一个区间（比如每秒30帧），它会顺利得多。这样，它继续缓解鼠标停止后还是一样。

Your choppiness is because it's running solely on the mousemove event. If you break it out into an interval (say 30 frames per second), it will be much smoother. This way it continues to ease even after the mouse stops.

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;
});

这篇关于鼠标移动动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！