为鼠标位置上的图像旋转添加缓动答案

【问题标题】：Add easing to the rotation of an image on mouse position为鼠标位置上的图像旋转添加缓动
【发布时间】：2013-09-08 14:00:43
【问题描述】：

对不起英语。我正在尝试添加一个“缓出弹性”的旋转运动，但我做不到。我正在尝试的代码是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);
    }

【问题讨论】：

标签： image rotation position mouse easing

【解决方案1】：

缓动计算需要使用计时器来完成。这可能很复杂，但是有许多库可以为您解决这个问题。先看看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/

【讨论】：