【备忘】bounce ease

偶尔会用到弹簧类似的缓动效果,就是不是直接从 A点缓动到B点, 而是 从A点出发,但是到最终停在B点之前,会以阻尼的方式在B点来回若干次。类似弹簧一样。 其实已有 bounce ease 的算法公式,比如:

Bounce: { easeIn: function(t,b,c,d){ return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b; }, easeOut: function(t,b,c,d){ if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) {
return c*( 7.5625*( t-=( 1.5/ 2.75))* t + .75) + b;
} else if ( t < ( 2.5/ 2.75)) {
return c*( 7.5625*( t-=( 2.25/ 2.75))* t + .9375) + b;
} else {
return c*( 7.5625*( t-=( 2.625/ 2.75))* t + .984375) + b;
}
},
easeInOut: function( t, b, c, d){
if ( t < d/ 2) return Tween. Bounce. easeIn( t* 2, 0, c, d) * .5 + b;
else return Tween. Bounce. easeOut( t* 2- d, 0, c, d) * .5 + c* .5 + b;
}
}
可惜通常这样的公式都满足不了需求。我们要的是简易的,又易于控制的代码。所以:
move: function () {
var disX = this. endX - this. x;
var disY = this. endY - this. y;
var dis = Math. sqrt( Math. pow( disX, 2) + Math. pow( disY, 2));
var force = dis * parseFloat( document. getElementById( 'force'). value);
var angle = Math. atan2( disY, disX); // atan2(x, y) 表示 点(x,y)到x轴的弧度
 
this. vx += force * Math. cos( angle);
this. vy += force * Math. sin( angle);
 
this. vx *= 0.92;
this. vy *= 0.92;
 
//
this. x += this. vx;
this. y += this. vy;
},
上面简单的代码可以做到我们想要的, 关键的在于 Math.atan2 获取某个点到x轴的反正弦。注意 两个参数,x,y调了个位置。 这个是为了配合下面 vx 阻尼时 乘以的系数。 因为
通常更习惯的是 x方向乘以 cos 的系数, y方向乘以 sin的系数。

Demo 1

Demo 2

你可能感兴趣的:(【备忘】bounce ease)