使用Velocity.js对可拖动元素进行动画处理 [英] Animate draggable element using velocity.js

问题描述

我正在使用Velocity.js为用户拖动的可拖动SVG元素设置动画。但是，velocity.js将先前的mousemove坐标&通过所有随后的mousemove坐标设置动画。我想要的是Velocity.js，而不是将坐标排入队列，而是使函数传递的最新坐标动起来。

I am using velocity.js to animate a draggable SVG element as it is dragged by the user. However, velocity.js queues the previous mousemove co-ordinates & animates through all the subsequent mousemove co-ordinates. What I want is velocity.js not to queue the co-ordinates but animate to the latest co-ordinates as passed on by the function.

选中此 jsFiddle

document.addEventListener("mousedown",mouseDown);
document.addEventListener("mouseup",endMove); 
var click=false;

var clickX, clickY;

var moveX=0, moveY=0; 

var lastMoveX=0, lastMoveY=0; 


function mouseDown(evt){

    evt.preventDefault(); 
    var element=(typeof (window.event) !=='undefined') ? evt.srcElement:evt.target;
    if(element.id==="mycirc")
    {
    click=true;
    clickX = evt.clientX;
    clickY = evt.clientY;
     }
document.addEventListener("mousemove",moveboth);          
return false;
}
function movexaxis(evt)
{
    var clx=evt.clientX-clickX;
     moveX = lastMoveX + clx;
     return moveX;
     }


function moveyaxis(evt)
{
      var cly=evt.clientY-clickY;
       moveY = lastMoveY + cly;
       return moveY;
     }

function moveboth（evt）{
setTimeout（function move（） {

function moveboth(evt){ setTimeout(function move(){

    evt.preventDefault();

    var a=document.getElementById("mycirc"); 

    if(click){
        movexaxis(evt);
        moveyaxis(evt);
        Velocity(a,{translateX: moveX},{duration:"0ms"},  {queue:false});
        Velocity(a,{translateY: moveY },{duration:"0ms"},{queue:false});
        Velocity(a,"stop");
        }
    },34);
}
 function endMove(evt){
    click=false;
    lastMoveX = moveX;
    lastMoveY = moveY;     
}

推荐答案

拖动并不是一种类型动画，因此使用Velocity是主要的矫over过正。由于您已经具有存储x和y坐标的代码，因此您所需要做的就是使用 requestAnimationFrame（）更新元素的变换以将其转换为每一帧上的这些坐标。就是这样（：

Dragging is not really a type of animation, so using Velocity is a major overkill. Since you already have the code that stores x and y coordinates, all that you need to do is use requestAnimationFrame() to update the element's transform to translate to these coordinates on each frame. And that's it (:

这篇关于使用Velocity.js对可拖动元素进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！