JavaScript 中怎么用 WebSocket 实现实时投票统计动画-js教程-PHP中文网

WebSocket实现实时投票统计动画的核心是数据实时推送与前端平滑渲染：服务端主动推送票数，前端用requestAnimationFrame实现数字滚动、柱状图高度及百分比的缓动动画，并通过防抖避免高频更新导致的动画冲突。

javascript 中怎么用 websocket 实现实时投票统计动画

WebSocket 实现实时投票统计动画，核心是“数据实时推送 + 前端平滑渲染”。服务端通过 WebSocket 主动把最新票数推给所有客户端，前端收到后不直接跳变数字，而是用缓动动画（如 `requestAnimationFrame`）让数字从旧值滚动到新值，视觉更自然。

1. 建立 WebSocket 连接并监听投票数据

页面加载后连接服务端 WebSocket，并约定好消息格式（例如 `{type: 'vote-update', data: {optionA: 12, optionB: 8}}`）：

const socket = new WebSocket('ws://localhost:8080');
<p>socket.onopen = () => console.log('已连接到投票服务器');
socket.onmessage = (event) => {
const msg = JSON.parse(event.data);
if (msg.type === 'vote-update') {
updateVoteBars(msg.data); // 触发动画更新
}
};
</p>

2. 用 requestAnimationFrame 实现数字滚动动画

避免 `setTimeout` 或 `setInterval` 的不精确性，用 `requestAnimationFrame` 做逐帧过渡。关键点：记录起始值、目标值、当前帧进度，线性插值计算中间值：

function animateNumber(el, start, end, duration = 600) {
  const startTime = performance.now();
  const ease = t => t; // 线性缓动；可换为 t => t * t（加速）等
<p>function step(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const eased = ease(progress);
const value = Math.floor(start + (end - start) * eased);</p><pre class="brush:php;toolbar:false;">el.textContent = value;

if (progress <p>}
requestAnimationFrame(step);
}
</p>