📅 最后修改于: 2023-12-03 14:58:47.353000 🧑 作者: Mango
在前端应用中，颜色是一个非常常见的属性。通常情况下，我们使用十六进制来表示颜色。但是，有时候我们需要让颜色有一个颤动效果，即在一定时间范围内不断变换颜色值，以达到视觉上的动态效果。本篇文章将为大家介绍如何实现颤动十六进制颜色。
首先，我们需要选定一个基础的颜色。在本例中，我们选用了#007bff，这是Bootstrap蓝色的默认颜色。当然你可以根据需要选择其他颜色。
接下来，我们需要定义一个时间周期，一个周期内颜色值变化的次数，以及每次变化的色调值大小。这里我们定义一个时间周期为两秒钟，色调值大小为10，变化次数为5。
const baseColor = '#007bff';
const period = 2000; // 2 seconds
const colorSteps = 5; // 5 color steps per period
const colorStepSize = 10; // color step size
接下来，我们编写一个函数，该函数将接收一个时间戳，并以基础颜色为基础，计算出当前时间周期内的颜色值。具体实现如下：
function getShakingColor(timestamp) {
const timeInPeriod = timestamp % period; // 获取当前时间在周期中的位置
const step = Math.floor(timeInPeriod / (period / colorSteps)); // 获取当前位置在变化序列中的位置
const stepSize = step % 2 == 0 ? colorStepSize : -colorStepSize; // 根据当前变化位置的奇偶性，计算出当前变化大小的正负
const component1 = parseInt(baseColor.substr(1, 2), 16); // 获取颜色的三个分量 R/G/B
const component2 = parseInt(baseColor.substr(3, 2), 16);
const component3 = parseInt(baseColor.substr(5, 2), 16);
const newComponent1 = Math.max(0, Math.min(255, component1 + stepSize)); // 根据变化量，计算出新的 R/G/B 分量的值，保证其在合法范围内
const newComponent2 = Math.max(0, Math.min(255, component2 + stepSize));
const newComponent3 = Math.max(0, Math.min(255, component3 + stepSize));
const newColor = '#' + newComponent1.toString(16).padStart(2, '0') + newComponent2.toString(16).padStart(2, '0') + newComponent3.toString(16).padStart(2, '0'); // 重新组装颜色值
return newColor;
}
最后，我们可以编写一个简单的DOM页面，以100毫秒的间隔调用上述函数，并将返回的颜色值设置为背景颜色。具体实现如下：
<!DOCTYPE html>
<html>
<head>
<title>颤动十六进制颜色</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 5rem;
color: white;
}
</style>
</head>
<body>
<script>
const baseColor = '#007bff';
const period = 2000; // 2 seconds
const colorSteps = 5; // 5 color steps per period
const colorStepSize = 10; // color step size
function getShakingColor(timestamp) {
const timeInPeriod = timestamp % period; // 获取当前时间在周期中的位置
const step = Math.floor(timeInPeriod / (period / colorSteps)); // 获取当前位置在变化序列中的位置
const stepSize = step % 2 == 0 ? colorStepSize : -colorStepSize; // 根据当前变化位置的奇偶性，计算出当前变化大小的正负
const component1 = parseInt(baseColor.substr(1, 2), 16); // 获取颜色的三个分量 R/G/B
const component2 = parseInt(baseColor.substr(3, 2), 16);
const component3 = parseInt(baseColor.substr(5, 2), 16);
const newComponent1 = Math.max(0, Math.min(255, component1 + stepSize)); // 根据变化量，计算出新的 R/G/B 分量的值，保证其在合法范围内
const newComponent2 = Math.max(0, Math.min(255, component2 + stepSize));
const newComponent3 = Math.max(0, Math.min(255, component3 + stepSize));
const newColor = '#' + newComponent1.toString(16).padStart(2, '0') + newComponent2.toString(16).padStart(2, '0') + newComponent3.toString(16).padStart(2, '0'); // 重新组装颜色值
return newColor;
}
function updateColor() {
const now = Date.now();
document.body.style.backgroundColor = getShakingColor(now);
}
updateColor();
setInterval(updateColor, 100);
</script>
</body>
</html>
你可以通过点击这个链接访问在线的示例：颤动十六进制颜色
颤动十六进制颜色是一种在前端应用中常见的动态效果。使用JavaScript，我们可以轻松地实现这一效果。通过本文的介绍，你现在已经可以自己实现一个颤动十六进制颜色的效果了。