這篇文章帶給大家的內容是關於js中tween.js實現動畫緩慢移動的效果（實例代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
window.requestAnimFrame = (function (callback,time) {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimaitonFrame ||
function (callback) {
window.setTimeout(callback, time);
};
})();/* * t: current time（当前时间,小于持续时间，tween返回当前时间目标的状态）； * b: beginning value（初始值）； * c: change in value（变化量）； * d: duration（持续时间）。 */
Linear：線性勻速運動效果；
Quadratic：二次方的緩動（t^2）；
Cubic：三次方的緩動（ t^3）；
Quartic：四次方的緩動（t^4）；
Quintic：五次方的緩動（t^5）；
Sinusoidal：正弦曲線的緩動（sin(t)）；
Exponential：指數曲線的緩動（2^t）；
Circular：圓形曲線的緩動（sqrt(1-t^2)）；
Elastic：指數衰減的正弦曲線緩動；
Back：超過範圍的三次方緩動（(s 1)t^3 – st^ 2）；
Bounce：指數衰減的反彈緩動。
每個效果都分成三個緩動方式，分別是：
easeIn：從0開始加速的緩動，也就是先慢後快；
easeOut：減速到0的緩動，也就是先快後慢；
easeInOut：前半段從0開始加速，後半段減速到0的緩動。
Tween.js動畫演算法使用示意實例頁面
1.
var t = 0, b = 0, c = 100, d = 10;
var step = function () {
// value就是当前的位置值
// 例如我们可以设置DOM.style.left = value + 'px'实现定位
var value = Tween.Linear(t, b, c, d);
t++;
if (t <p>2.返回頂部/setInterval</p><pre class="brush:php;toolbar:false">backTop(){
var Tween = {
Linear: function(t, b, c, d) { //匀速运动
return c * t / d + b;
}
}
Math.tween = Tween;
var t = 0;
const b = document.documentElement.scrollTop;
const c = 100;
const d = 5;
const setInt = setInterval(()=>{
t--;
//console.log(t)
if(document.documentElement.scrollTop == 0){clearInterval(setInt)}
//console.log(t);
const backTop = Tween.Linear(t,b,c,d);
//console.log(backTop);
document.documentElement.scrollTop = backTop;
},5)
},
學趣樂園，backLeft
npm install @tweenjs/tween.js
var box = document.createElement('p');
box.style.setProperty('background-color', '#008800');
box.style.setProperty('width', '100px');
box.style.setProperty('height', '100px');
document.body.appendChild(box);
// 动画循环
function animate(time) {
requestAnimationFrame(animate);
TWEEN.update(time);
}
requestAnimationFrame(animate);
var coords = { x: 0, y: 0 }; // 开始位置
var tween = new TWEEN.Tween(coords) // 创建一个更改目标的tween
.to({ x: 300, y: 200 }, 1000) // 目的位置，1s
.easing(TWEEN.Easing.Quadratic.Out) // 平滑动画
.onUpdate(function() { // 目标更新后调用
// CSS translation
box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)');
})
.start();相關推薦：
如何用tween.js實作導航條滑動_html/css_WEB-ITnose
以上是js中tween.js實現動畫緩慢移動的效果（實例程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
