本文通过具体代码实例，展示了如何使用 JavaScript 实现元素的缓动运动效果。文中定义了线性、easeIn、strongEaseIn、strongEaseOut 等多种缓动函数，并封装了 Animate 类来管理 DOM 元素的属性变化。通过调用 start 方法，可轻松实现如 left 属性从初始值到目标值的平滑过渡，适用于需要自然运动感的前端交互场景。
JavaScript 缓动动画实现
本文通过具体代码示例，详细介绍如何利用 JavaScript 实现元素的缓动运动效果，供读者参考学习。
var tween = {
linear:function(t,b,c,d){
return c*t/d + b;
},
easeIn:function(t,b,c,d){
return c * ( t /= d ) * t + b;
},
strongEaseIn:function(t,b,c,d){
return c * ( t /= d ) * t * t * t * t + b;
},
strongEaseOut:function(t,b,c,d){
return c * ( ( t = t / d -1 ) * t * t * t * t +1 ) + b;
},
sineaseIn:function(t,b,c,d){
return c * ( t /= d ) * t * t + b;
},
sineaseOut:function(t,b,c,d){
return c * ( ( t = t / d -1 ) * t * t *t +1 ) + b;
}
};
var Animate = function(dom){
this.dom = dom;
this.startTime = 0;
this.startPos = 0;
this.endPos = 0;
this.propertyName = null;
this.easing = null;
this.duration = null;
}
Animate.prototype.start = function(propertyName,endPos,duration,easing){
this.startTime = +new Date;
this.startPos = this.dom.getBoundingClientRect()[propertyName];
this.propertyName = propertyName;
this.endPos = endPos;
this.duration = duration;
this.easing = tween[easing];
var self = this;
var timeId = setInterval(function(){
if(self.step() === false){
clearInterval(timeId);
}
},19);
}
Animate.prototype.step = function(){
var t = +new Date;
if(t>=this.startTime + this.duration){
this.update(this.endPos);
return false;
}
var pos = this.easing(t-this.startTime, this.startPos, this.endPos - this.startPos, this.duration);
this.update(pos);
}
Animate.prototype.update = function(pos){
this.dom.style[this.propertyName] = pos + 'px';
}
var div = document.getElementById('div');
var animate = new Animate(div);
animate.start('left',500,1000,'strongEaseOut');
以上内容为本文的全部代码与说明，希望能为读者的学习提供有益帮助，同时也欢迎读者继续支持本站获取更多技术资源。