javascript - 缓动函数对象运行得太快

Question

我最近发现了这个包含一些缓动函数的网站:http://gizma.com/easing/

并尝试在我的脚本中实现 quadratic easing in/out，但我的 sprite 似乎超快地从屏幕上闪过。我不确定我的逻辑哪里出了问题，需要一些帮助来理解我的错误。

我的缓动函数是这样的:

    //t = time, b = startvalue, c = change in value
     function ease(t, b, c, duration) {
         t /= duration/2; //duration is in milliseconds
         if (t < 1) return c/2*t*t + b;
         t--;
         return -c/2 * (t*(t-2) - 1) + b;
     };

我的动画代码是从 mousedown 监听器触发的:

function animate(e){
    clearTimeout(timer);

    var duration  = 2000; //2 seconds

    var startX    = camera.x;
    var startY    = camera.y;

    var targetX   = e.offsetX - element.width/2  + camera.x; //world space
    var targetY   = e.offsetY - element.height/2 + camera.y; //world space

    var vectorX   = targetX - startX / duration;
    var vectorY   = targetY - startY / duration;

    var startTime = Date.now();

    function update(){
        var t   = Date.now() - startTime; //time elapsed so far
        var cX  = vectorX * t; //change in X
        var cY  = vectorY * t; //change in Y

        var amountX = ease(t,startX,cX,duration); // see function above
        var amountY = ease(t,startY,cY,duration);

        var difX    = startX - amountX; //get the difference
        var difY    = startY - amountY;

            camera.x += difX;
            camera.y += difY;

        if (t >= duration){
            clearTimeout(timer);
        } else {
            timer = setTimeout(update,0);               
        }
    }
    update();   
}

是什么导致动画进行得如此之快和如此之远？

编辑:添加了一个 fiddle encase 帮助:http://jsfiddle.net/a86m33nj/

Answer 1

https://jsfiddle.net/pcconsolidated/xesnom2t/

您的问题只是过于复杂了。二次地役权函数只是想知道开始坐标、移动多远、相对于开始时间的当前时间以及总持续时间。此外，二次函数的输出是新坐标，而不是对象移动的距离，因此只需将坐标替换为四舍五入到最接近数字的函数的值即可。

var element 		= document.getElementById('background');
var output 		    = document.getElementById('output');
var camera=document.getElementById("camera");
var timer;
var targetX=0;
var targetY=0;
document.addEventListener('click', animate,true);
var duration  = 2000; //2 seconds
var startX    = 0;
var startY    = 0;
var startTime =0;


function animate(e){
	targetX   = e.clientX ;
    targetY   = e.clientY ;
	clearTimeout(timer);
     startX    = parseInt(camera.style.left.split("p")[0]);
	 startY    = parseInt(camera.style.top.split("p")[0]);
	 
	startTime = Date.now();
    	
    
	
		 
	
		updateLoc();	
	}
	


	function updateLoc(){
			var t	= (Date.now() - startTime);
			var cX 	= targetX-startX; //change in X
			var cY  = targetY-startY; //change in Y
            
			var amountX = ease(t,startX,cX,duration);
			var amountY = ease(t,startY,cY,duration);
               
				newX=Math.floor(amountX);
				newY=Math.floor(amountY);
				camera.style.left = Math.floor(newX)+"px";
            	camera.style.top = Math.floor(newY)+"px";
				output.innerHTML+=newX+","+newY+"___";
			if (Date.now() - startTime >= duration){
				clearTimeout(timer);
			} else {
				timer = setTimeout(updateLoc,0);				
			}
		}


	
	//t = time, b = startvalue, c = change in value
		 function ease(t, b, c,duration) {
			 t /= duration/2;
			 if (t < 1) return c/2*t*t + b;
			 t--;
			 return -c/2 * (t*(t-2) - 1) + b;
		 };


</script>

<canvas id="background" width="500" height="500">
    
    
    
</canvas><br/>
<div id="output"></div><div id="camera" style="background-color:green;top:250px;left:150px;position:absolute;height:30px;width:30px;"></div>

<script type="text/javascript">

这很乱，我的偏移量在某处是错误的，但我会在晚饭后继续修补，看看我是否能做到。这是我的代码，希望它对你有用。