Javascript 如何在两个y坐标之间轻松切换？

对于学校作业，我们必须用Javascript制作一个图表。 老师想看一些动画图。所以我在一周内建立了一个关于我的tweet的图表，但找不到如何在两个y坐标之间轻松切换

你可以找到我的项目，或者

var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var form=document.getElementById（“表单”）；
var数据=[]；
var huidigeYpos=[]；
var nieuweYpos=[]；
var计数=[]；
var snelheid=0；
函数init（）{
ctx.fillStyle=“rgb（255255）”；
ctx.fillRect（0,0，canvas.width，canvas.height）；
ctx.translate（0445）；
对于（变量i=0；i<7；i++）{
数据[i]=形式[i]。值*30；
}
draw（）；
}
函数绘图（）{
ctx.fillStyle=“rgb（255255）”；
ctx.fillRect（0,0，canvas.width，-canvas.height）；
ctx.beginPath（）；
ctx.moveTo（0,0）；
对于（变量i=0；i 7）{
huidigeYpos.拼接（0,7）；
}
ctx.lineTo（750,0）；
ctx.closePath（）；
ctx.fillStyle=“#0084FF”；
ctx.fill（）；
}
函数invullen（）{
对于（变量i=0；i<7；i++）{
数据[i]=形式[i]。值*30；
}
draw（）；
}
函数drawRandomGraph（）{
对于（变量i=0；i<7；i++）{
形式[i].value=Math.round（Math.random（）*10）；
nieuweYpos.push（表[i].值*30）；
}
如果（nieuweYpos.length>7）{
nieuweYpos拼接（0,7）；
}
因弗伦（）；
}
init（）；

---

提前谢谢

可以将插值与缓和函数结合使用。两点之间的标准插值（又名lerping）非常简单：

p = p1 + (p2 - p1) * t

其中

t

在[0,1]范围内

通过为

t

（也在[0,1]范围内）注入缓和功能，可以缓和过渡：

...
y = y1 + (y2 - y1) * easeInOut(t);
...

function easeInOut(t) {return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1}

---

您能进一步解释一下您的问题吗@约瑟里卡多布斯托斯。我想知道当值发生变化时，如何产生缓和效果。就像我按下drawRandomGraph按钮时一样，旧值会变为新值并显示出来。第一：efect（动画），因此最好使用一个库，例如ds3第二：要添加标记

canvas

a您的问题第三：按钮，我会在post中回答

...
y = y1 + (y2 - y1) * easeInOut(t);
...

function easeInOut(t) {return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1}