0

对不起英语。我正在尝试添加一个“缓出弹性”的旋转运动，但我做不到。我正在尝试的代码是http://jsfiddle.net/22Feh/5/。谢谢 

    
    var img = $('.image');
    if(img.length > 0){
    var offset = img.offset();
    function mouse(evt){
        var center_x = (offset.left) + (img.width()/2);
        var center_y = (offset.top) + (img.height()/2);
        var mouse_x = evt.pageX; var mouse_y = evt.pageY;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 90; 
        img.css('-moz-transform', 'rotate('+degree+'deg)');
        img.css('-webkit-transform', 'rotate('+degree+'deg)');
        img.css('-o-transform', 'rotate('+degree+'deg)');
        img.css('-ms-transform', 'rotate('+degree+'deg)');
    }
    $(document).mousemove(mouse);
    }

4

1 回答 1

0

缓动计算需要使用计时器来完成。这可能很复杂，但是有许多库可以为您解决这个问题。首先看一下GSAP。

使用您的代码，我在下面创建了 jsfiddle。您可以看到我所做的只是用 TweenMax 函数替换您的 css 代码转换代码并增加了易用性。

TweenMax.to(img, 1, {rotationZ:degree, ease:Elastic.easeOut});

http://jsfiddle.net/Boolean/PNvgt/

然后，如果您想更进一步，可以使用 GreenSock Draggable 库。

http://www.greensock.com/draggable/

于 2013-10-31T12:20:49.330 回答