p5.js入门教程之平滑过渡(Easing)
一、跟随鼠标移动的小球
使用mouseX,mouseY可以创建一个跟随鼠标移动的小球。
functionsetup(){
createCanvas(400,400);
}
functiondraw(){
background(220);
ellipse(mouseX,mouseY,20,20);
}
二、让小球更加平滑的移动——使用Easing
一般制作精良的UI界面都会用到平滑移动这一效果，也就是利用了名为“Easing”的方法。
实现思路是另外设置变量以进行位置的过渡，代码如下：
varx=0;
vary=0;
vartargetX=0;
vartargetY=0;
vareasing=0.1;
functionsetup(){
createCanvas(400,400);
x=mouseX;
y=mouseY;
}
functiondraw(){
background(220);
targetX=mouseX;
targetY=mouseY;
x+=(targetX-x)*easing;
y+=(targetY-y)*easing;
ellipse(x,y,20,20);
}
easing的值越大，跟随的速度会越快。
最终效果：https://alpha.editor.p5js.org/full/Sy96bL-8b
三、按钮变色Easing
当然，不仅仅是在物体运动，一切涉及数值变化的都可以使用Easing来进行过渡。
以下代码是一个按钮，当鼠标移到上方时，会逐渐变色，也是用了Easing进行过渡。
varrectX=0;
varrectY=0;
varrectHeight=100*0.618;
varrectWidth=100;
varhoverR=255;
varhoverG=128;
varhoverB=128
varexitR=255;
varexitG=255;
varexitB=255;
varR=0;
varG=0;
varB=0;
varease=0.1;
functionsetup(){
createCanvas(400,400);
rectX=width/2;
rectY=height/2;
R=exitR;
G=exitG;
B=exitB;
}
functiondraw(){
background(220);
if(mouseX>=rectX-rectWidth/2&&mouseX<=rectX+rectWidth/2&&
mouseY>=rectY-rectHeight/2&&mouseY<=rectY+rectHeight/2){
R+=(hoverR-R)*ease;
G+=(hoverG-G)*ease;
B+=(hoverB-B)*ease;
}else{
R+=(exitR-R)*ease;
G+=(exitG-G)*ease;
B+=(exitB-B)*ease;
}
fill(R,G,B);
rectMode(CENTER);
rect(rectX,rectY,rectWidth,rectHeight,8);
}
最终效果：http://alpha.editor.p5js.org/full/BJuEqvW8W
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。