偶爾會(huì)用到彈簧類似的緩動(dòng)效果，就是不是直接從 A點(diǎn)緩動(dòng)到B點(diǎn)， 而是 從A點(diǎn)出發(fā)，但是到最終停在B點(diǎn)之前，會(huì)以阻尼的方式在B點(diǎn)來(lái)回若干次。類似彈簧一樣。 其實(shí)已有 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; } } 可惜通常這樣的公式都滿足不了需求。我們要的是簡(jiǎn)易的，又易于控制的代碼。所以: 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) 表示 點(diǎn)（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; }, 上面簡(jiǎn)單的代碼可以做到我們想要的， 關(guān)鍵的在于 Math.atan2 獲取某個(gè)點(diǎn)到x軸的反正弦。注意 兩個(gè)參數(shù)，x,y調(diào)了個(gè)位置。 這個(gè)是為了配合下面 vx 阻尼時(shí) 乘以的系數(shù)。 因?yàn)?通常更習(xí)慣的是 x方向乘以 cos 的系數(shù)， y方向乘以 sin的系數(shù)。

Demo 1

Demo 2

轉(zhuǎn)載于:https://www.cnblogs.com/hongru/archive/2011/12/22/2298518.html

總結(jié)

以上是生活随笔為你收集整理的【备忘】bounce ease的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。