JS运动相关知识点小结(附弹性运动示例)

JS运动相关知识点小结(附弹性运动示例)

引言

随着Web应用越来越复杂，动画效果也逐渐成为Web开发中不可或缺的一部分，而JavaScript正是实现这些动画效果的关键。本文主要介绍JS运动相关的知识点，并通过附带的弹性运动示例来帮助读者更好地掌握这些知识点。

目录

• 基础知识
• 运动方式
• 缓动函数
• 弹性运动

基础知识

获取元素位置

在进行JS运动时，首先需要获取元素的位置信息。常见的有以下几种：

• 获取元素相对于文档的位置

通过元素的 offsetLeft 和 offsetTop 属性可以获取元素相对于文档左上角的位置信息。

示例代码：

var ele = document.getElementById("box");
var offsetX = ele.offsetLeft;
var offsetY = ele.offsetTop;

• 获取元素相对于父元素的位置

通过元素的 offsetParent 和 offsetTop 属性可以获取元素相对于其父元素左上角的位置信息。

示例代码：

var parentEle = document.getElementById("parentBox");
var ele = document.getElementById("box");
var offsetX = ele.offsetLeft - parentEle.offsetLeft;
var offsetY = ele.offsetTop - parentEle.offsetTop;

获取元素大小

在进行JS运动时，还需要获取元素的大小信息。常见的有以下几种：

• 获取元素宽度和高度

通过元素的 offsetWidth 和 offsetHeight 属性可以获取元素的宽度和高度。

示例代码：

var ele = document.getElementById("box");
var width = ele.offsetWidth;
var height = ele.offsetHeight;

• 获取元素自身宽度和高度

通过元素的 clientWidth 和 clientHeight 属性可以获取元素自身的宽度和高度（不包括边框和滚动条）。

示例代码：

var ele = document.getElementById("box");
var width = ele.clientWidth;
var height = ele.clientHeight;

运动方式

在JS中，常见的运动方式有以下三种：

• setInterval

通过 setInterval 函数来定时执行某个函数，从而实现动画效果。每隔一定时间间隔执行一次，直到达到目标状态。

示例代码：

var ele = document.getElementById("box");
var targetX = 100;
var targetY = 200;

var timer = setInterval(function() {
    var curX = ele.offsetLeft;
    var curY = ele.offsetTop;
    var speedX = (targetX - curX) / 10;
    var speedY = (targetY - curY) / 10;
    ele.style.left = curX + speedX + "px";
    ele.style.top = curY + speedY + "px";
    if (curX == targetX && curY == targetY) {
        clearInterval(timer);
    }
}, 20);

• requestAnimationFrame

通过 requestAnimationFrame 函数来执行某个动画效果，其实现原理和 setInterval 相似，但会根据浏览器性能自动调整帧率，更加流畅。

示例代码：

var ele = document.getElementById("box");
var targetX = 100;
var targetY = 200;

function move() {
    var curX = ele.offsetLeft;
    var curY = ele.offsetTop;
    var speedX = (targetX - curX) / 10;
    var speedY = (targetY - curY) / 10;
    ele.style.left = curX + speedX + "px";
    ele.style.top = curY + speedY + "px";
    if (Math.abs(targetX - curX) <= 1 && Math.abs(targetY - curY) <= 1) {
        ele.style.left = targetX + "px";
        ele.style.top = targetY + "px";
    } else {
        requestAnimationFrame(move);
    }
}
requestAnimationFrame(move);

• transition

通过 CSS 的 transition 属性来实现动画效果。设置好需要动画的 CSS 属性和动画时间后，浏览器将自动处理动画效果。

示例代码：

#box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: all 1s;
}
#box:hover {
    transform: translateX(100px);
}

缓动函数

在运动的过程中，需要对运动的速度进行控制。常见的方式是使用缓动函数来实现，常见的缓动函数有以下几种：

• 线性缓动函数

速度恒定，实现简单，但缺乏流畅感。

function linear(t, b, c, d) {
    return c * t / d + b;
}

• 平方缓动函数

速度逐渐增加，动画开始时缓慢，后面加速。

function quadraticEaseIn(t, b, c, d) {
    return c * (t /= d) * t + b;
}
function quadraticEaseOut(t, b, c, d) {
    return -c * (t /= d) * (t - 2) + b;
}
function quadraticEaseInOut(t, b, c, d) {
    if ((t /= d / 2) < 1) return c / 2 * t * t + b;
    return -c / 2 * ((--t) * (t - 2) - 1) + b;
}

• 指数缓动函数

速度逐渐增加，动画开始时缓慢，后面加速。

function expoEaseIn(t, b, c, d) {
    return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b - c * 0.001;
}
function expoEaseOut(t, b, c, d) {
    return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
}
function expoEaseInOut(t, b, c, d) {
    if (t == 0) return b;
    if (t == d) return b + c;
    if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
    return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
}

• 弹性缓动函数

模拟弹性运动的效果，动画结束后会产生弹跳回震动的效果。

function elasticEaseIn(t, b, c, d) {
    var s = 1.70158; 
    var p = 0; 
    var a = c; 
    if (t == 0) return b;  
    if ((t /= d) == 1) return b + c;  
    if (!p) p = d * 0.3;  
    if (a < Math.abs(c)) { 
        a = c; 
        var s = p / 4; 
    } else {
        var s = p / (2 * Math.PI) * Math.asin(c / a); 
    }
    return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
}
function elasticEaseOut(t, b, c, d) {
    var s = 1.70158; 
    var p = 0; 
    var a = c; 
    if (t == 0) return b;   
    if ((t /= d) == 1) return b + c;  
    if (!p) p = d * 0.3; 
    if (a < Math.abs(c)) { 
        a = c; 
        var s = p / 4; 
    } else {
        var s = p / (2 * Math.PI) * Math.asin(c / a); 
    }
    return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
}
function elasticEaseInOut(t, b, c, d) {
    var s = 1.70158; 
    var p = 0; 
    var a = c; 
    if (t == 0) return b;  
    if ((t /= d / 2) == 2) return b + c;  
    if (!p) var p = d * (0.3 * 1.5); 
    if (a < Math.abs(c)) { 
        var a = c; 
        var s = p / 4; 
    } else {
        var s = p / (2 * Math.PI) * Math.asin(c / a); 
    }
    if (t < 1) return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
    return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
}

弹性运动

弹性运动是指，运动到达目标时，元素不是立即停止，而是从目标位置继续运动一段距离，然后“反弹”回来，再次超过目标后，又会“反弹”回来。具体实现可以借助缓动函数来模拟。

示例代码：

var ele = document.getElementById("ball");
var targetX = 500;
var targetY = 150;
var times = 0;
var speedX = 0;
var speedY = 0;

function move() {
    var curX = ele.offsetLeft;
    var curY = ele.offsetTop;
    var distanceX = targetX - curX;
    var distanceY = targetY - curY;
    speedX += distanceX * 0.3;
    speedY += distanceY * 0.3;
    speedX *= 0.8;
    speedY *= 0.8;
    ele.style.left = curX + speedX + "px";
    ele.style.top = curY + speedY + "px";
    times++;
    if (times < 100) {
        requestAnimationFrame(move);
    }
}
requestAnimationFrame(move);

以上就是对JS运动相关知识点的小结和弹性运动示例的介绍。希望通过本文的学习，能够对JS运动有更深入的了解，从而更好地实现Web开发中的动画效果。