/* * 抛物线函数 * 参数: * elem:被操作的元素 * targetX:目标点 * targetY:目标点 * a: a<0时,开口朝下; a>0时,开口朝上 * fn: 运动执行后,所触发的函数 */ function parabola(elem, targetX, targetY, a, fn){ // 起点 var [originX, originY] = [elem.offsetLeft, elem.offsetTop]; // 目标点 // targetX, targetY var x = targetX - originX; var y = targetY - originY; var c = 0; // 抛物线公式 // y = axx + bx + c; // b = (y-axx-c)/x var b = (y-a*x*x-c)/x; // 已知a、b、c后,随意给一个x,求这个x所对应的y x = 0; clearInterval(elem.timer2); elem.timer2 = setInterval( ()=>{ //x += 1; // 匀速运动 x += (targetX-elem.offsetLeft)/6; // 缓冲运动 x = Math.ceil(x); // 根据抛物线公式,已知x,求y y = a*x*x + b*x + c; // 更新坐标 elem.style.left = originX+x+'px'; elem.style.top = originY+y+'px'; // 如果到了目标点 if( originX+x>=targetX ){ elem.style.left = targetX+'px'; elem.style.top = targetY+'px'; clearInterval(elem.timer2); // 停止定时器 if(fn){ // 如果设置了回调函数, fn(); // 则执行回调函数 } } }, 50 ); }