偶爾會用到彈簧類似的緩動效果，就是不是直接從 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

轉載于:https://www.cnblogs.com/hongru/archive/2011/12/22/2298518.html

總結

以上是生活随笔為你收集整理的【备忘】bounce ease的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。