Question

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

Answer 1

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

使用你的代码我在下面创建了jsfiddle。您可以看到我所做的就是用TweenMax函数替换您的css代码转换代码并添加了easy。

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

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

然后，如果你想更进一步，那就是GreenSock Draggable库。

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

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

1 个答案: