后台数据交互
动画与后台数据的交互是实现动态、实时动画效果的关键，通过API获取数据驱动动画变化。
数据交互方式
定时轮询
定期向服务器请求数据更新
WebSocket
建立持久连接，实时接收数据
Server-Sent Events
服务器单向推送数据到客户端
GraphQL订阅
订阅特定数据变更事件
数据驱动动画示例
// 使用WebSocket接收实时数据并驱动动画
class AnimatedDataDisplay {
constructor() {
this.dataPoints = [];
this.canvas = document.getElementById('animationCanvas');
this.ctx = this.canvas.getContext('2d');
this.initWebSocket();
this.startAnimationLoop();
}
initWebSocket() {
this.ws = new WebSocket('ws://localhost:8080/data');
this.ws.onmessage = (event) => {
const newData = JSON.parse(event.data);
this.dataPoints.push({
value: newData.value,
timestamp: Date.now(),
x: this.dataPoints.length * 20
});
// 限制数据点数量
if (this.dataPoints.length > 100) {
this.dataPoints.shift();
}
};
}
startAnimationLoop() {
const animate = () => {
this.clearCanvas();
this.drawAnimatedChart();
requestAnimationFrame(animate);
};
animate();
}
clearCanvas() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
drawAnimatedChart() {
if (this.dataPoints.length < 2) return;
this.ctx.beginPath();
this.ctx.moveTo(this.dataPoints[0].x, this.dataPoints[0].value);
for (let i = 1; i < this.dataPoints.length; i++) {
const prev = this.dataPoints[i - 1];
const curr = this.dataPoints[i];
// 使用贝塞尔曲线使线条更平滑
const xc = (prev.x + curr.x) / 2;
const yc = (prev.value + curr.value) / 2;
this.ctx.quadraticCurveTo(prev.x, prev.value, xc, yc);
}
this.ctx.strokeStyle = '#3b82f6';
this.ctx.lineWidth = 2;
this.ctx.stroke();
}
}
// 初始化动画数据展示
const animatedDisplay = new AnimatedDataDisplay();