首页 > 百科知识 正文

缓动曲线算法学习(缓和曲线递减率)

时间:2023-11-19 21:11:21 阅读:409 作者:后情义贤

这是缓动曲线运动算法

传送门 : https://easings.net/cn

很多人都见过这个算法

缓动曲线算法学习(缓和曲线递减率)-第1张

这是具体的算法

缓动曲线算法学习(缓和曲线递减率)-第2张

我平时用得比较多的工具是processing

缓动曲线算法学习(缓和曲线递减率)-第3张

我把上面的代码进行了java转换

注释是原算法,根据使用场景需要调整

比如:游戏中人物移动不是突然停止,而是衰减停止,这时候算法就派上用场了

算法是个好东西,而且是开源公开的,再次基础上也可以自创曲线函数(功能)

缓动曲线算法学习(缓和曲线递减率)-第4张

float x,xs; void setup() { size(369,369); } void draw() { background(233); xs ; xs%=width; x = easeInOutElastic(map(xs,0,width,0,1))*width; rect(x,150,6,6); println(x); } float easeInSine(float x){ return 1 - cos((x * PI) / 2); } float easeOutSine(float x){ return sin((x * PI) / 2); } float easeInOutSine(float x){ return -(cos(PI * x) - 1) / 2; } float easeInCubic(float x){ return x * x * x; } float easeOutCubic(float x){ return 1 - pow(1 - x, 3); } float easeInOutCubic(float x){ if(x<0.5){return 4*x*x*x;} else{return 1 - pow(-2 * x 2, 3) / 2;} //return x < 0.5 ? 4 * x * x * x : 1 - pow(-2 * x 2, 3) / 2; } float easeInQuint(float x){ return x * x * x * x * x; } float easeOutQuint(float x){ return 1 - pow(1 - x, 5); } float easeInOutQuint(float x){ if(x<0.5){ return 16 * x * x * x * x * x;} else{return 1 - pow(-2 * x 2, 5) / 2; } //return x < 0.5 ? 16 * x * x * x * x * x : 1 - pow(-2 * x 2, 5) / 2; } float easeInCirc(float x){ return 1 - sqrt(1 - pow(x, 2)); } float easeOutCirc(float x){ return sqrt(1 - pow(x - 1, 2)); } float easeInOutCirc(float x){ if(x<0.5){return (1 - sqrt(1 - pow(2 * x, 2))) / 2;} else{return (sqrt(1 - pow(-2 * x 2, 2)) 1) / 2;} //return x < 0.5 // ? (1 - sqrt(1 - pow(2 * x, 2))) / 2 // : (sqrt(1 - pow(-2 * x 2, 2)) 1) / 2; } float easeInElastic(float x){ float c4 = (2 * PI) / 3; if(x==0){return 0;} else if(x==1){return 1;} else{return -pow(2, 10 * x - 10) * sin((x * 10 - 10.75) * c4);} //return x === 0 // ? 0 // : x === 1 // ? 1 // : -pow(2, 10 * x - 10) * sin((x * 10 - 10.75) * c4); } float easeOutElastic(float x){ float c4 = (2 * PI) / 3; if(x==0){return 0;} else if(x==1){return 1;} else{return pow(2, -10 * x) * sin((x * 10 - 0.75) * c4) 1;} //return x === 0 // ? 0 // : x === 1 // ? 1 // : pow(2, -10 * x) * sin((x * 10 - 0.75) * c4) 1; } float easeInOutElastic(float x){ float c5 = (2 * PI) / 4.5; if(x==0){return 0;} else if(x==1){return 1;} else if(x<0.5){return -(pow(2, 20 * x - 10) * sin((20 * x - 11.125) * c5)) / 2;} else{return (pow(2, -20 * x 10) * sin((20 * x - 11.125) * c5)) / 2 1;} //return x === 0 // ? 0 // : x === 1 // ? 1 // : x < 0.5 // ? -(pow(2, 20 * x - 10) * sin((20 * x - 11.125) * c5)) / 2 // : (pow(2, -20 * x 10) * sin((20 * x - 11.125) * c5)) / 2 1; }

缓动曲线算法学习(缓和曲线递减率)-第5张

float x,xs; void setup() { size(369,369); } void draw() { background(233); xs ; xs%=width; x = easeInOutBounce(map(xs,0,width,0,1))*width; rect(x,150,6,6); println(x); } float easeInQuad(float x){ return x*x; } float easeOutQuad(float x){ return 1 - (1 - x) * (1 - x); } float easeInOutQuad(float x){ if(x<0.5){return 2*x*x;} else{return 1 - pow(-2 * x 2, 2) / 2;} //return x < 0.5 ? 2 * x * x : 1 - pow(-2 * x 2, 2) / 2; } float easeInQuart(float x){ return x * x * x * x; } float easeOutQuart(float x){ return 1 - pow(1 - x, 4); } float easeInOutQuart(float x){ if(x<0.5){return 8*x*x*x;} else{return 1 - pow(-2 * x 2, 4) / 2;} //return x < 0.5 ? 8 * x * x * x * x : 1 - pow(-2 * x 2, 4) / 2; } float easeInExpo(float x){ if(x==0){return 0;} else{return pow(2, 10 * x - 10);} //return x === 0 ? 0 : pow(2, 10 * x - 10); } float easeOutExpo(float x){ if(x==1){return 1;} else{return 1 - pow(2, -10 * x);} //return x === 1 ? 1 : 1 - pow(2, -10 * x); } float easeInOutExpo(float x){ if(x==0){return 0;} else if(x==1){return 1;} else if(x<0.5){ return pow(2, 20 * x - 10) / 2;} else{return (2 - pow(2, -20 * x 10)) / 2; } //return x === 0 //? 0 //: x === 1 //? 1 //: x < 0.5 ? pow(2, 20 * x - 10) / 2 //: (2 - pow(2, -20 * x 10)) / 2; } float easeInBack(float x){ float c1 = 1.70158; float c3 = c1 1; return c3 * x * x * x - c1 * x * x; } float easeOutBack(float x){ float c1 = 1.70158; float c3 = c1 1; return 1 c3 * pow(x - 1, 3) c1 * pow(x - 1, 2); } float easeInOutBack(float x){ float c1 = 1.70158; float c2 = c1 * 1.525; if(x<0.5){return (pow(2 * x, 2) * ((c2 1) * 2 * x - c2)) / 2;} else{return (pow(2 * x - 2, 2) * ((c2 1) * (x * 2 - 2) c2) 2) / 2;} //return x < 0.5 // ? (pow(2 * x, 2) * ((c2 1) * 2 * x - c2)) / 2 // : (pow(2 * x - 2, 2) * ((c2 1) * (x * 2 - 2) c2) 2) / 2; } float easeInBounce(float x){ return 1 - easeOutBounce(1 - x); } float easeOutBounce(float x){ float n1 = 7.5625; float d1 = 2.75; if (x < 1 / d1) {return n1 * x * x;} else if (x < 2 / d1) {return n1 * (x -= 1.5 / d1) * x 0.75;} else if (x < 2.5 / d1) {return n1 * (x -= 2.25 / d1) * x 0.9375;} else {return n1 * (x -= 2.625 / d1) * x 0.984375;} } float easeInOutBounce(float x){ if(x<0.5){return (1 - easeOutBounce(1 - 2 * x)) / 2;} else{return (1 easeOutBounce(2 * x - 1)) / 2;} //return x < 0.5 //? (1 - easeOutBounce(1 - 2 * x)) / 2 //: (1 easeOutBounce(2 * x - 1)) / 2; }

本文代码纯手工转换,亲测可用。

版权声明:该问答观点仅代表作者本人。如有侵犯您版权权利请告知 cpumjj@hotmail.com,我们将尽快删除相关内容。