本篇文章给大家带来的内容是关于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 <= d) {
// 继续运动
requestAnimationFrame(step);
} else {
// 动画结束
}
};2.返回顶部/setInterval
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中文网其他相关文章！
