Question

我最近遇到过这个包含一些缓动功能的网站：http://gizma.com/easing/

并且已经尝试从它中实现quadratic easing in/out到我的脚本中但是我的精灵似乎超级快速地从屏幕上移开。我不确定我的逻辑出错了，需要帮助理解我的错误。

我的缓动功能如下：

    //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();   
}

导致动画进展如此之快的原因是什么？

编辑：补充说，它有助于帮助：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">

这是相当粗鲁的，我的抵消是错误的，但在晚餐后病态继续修补，看看我是否可以得到它。这是我的代码希望它适合你。

Answer 2

好的，在玩了你的代码之后我就开始了。现在，无论你点击哪里，相机都会关注：

   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;
    var targetY   = e.offsetY - element.height/2 + camera.y;

    var startTime = Date.now();

    //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;
     };

    function update(){
        var t   = (Date.now() - startTime);
        var cX  = -targetX; //change in X
        var cY  = -targetY; //change in Y

        camera.x = ease(t,startX,cX,duration);
        camera.y = ease(t,startY,cY,duration);

        if (Date.now() - startTime > duration){
            clearTimeout(timer);
        } else {
            timer = setTimeout(update,10);              
        }
    }    
    update();   
}

我希望它有所帮助。干杯！

缓和功能对象过快

2 个答案: