0
リアルタイムデータに基づいてHTML5 + CSS + JavaScriptウェブアプリケーションを開発する予定です。リアルタイムデータに基づいてスムーズにフロントエンド表現をアニメーション化する方法はありますか？
データは.csvファイルに記録され、setInterval()を使用して最新のレコードを取得し、AJAX呼び出しをトリガーします。現在、このプロジェクトはデータベースを使用せずにApacheサーバー上で実装されています。 CSS/SVG/JavaScriptでこのような種類のデータに基づいてアニメーショングラフを描画しようとすると、通常、アニメーションはデータの更新によって中断され、遷移はスムーズに行われません。
例えば、JavaScriptライブラリSiriWaveを使用してフロントページにカーブを描こうとし、setInterval()関数によってデータが更新されると波形が中断されます。タイマーをリフレッシュせずにスムーズにカーブを更新する方法はありますか？私のコードはここにある：
function getData(limit, callback) {
var data = setInterval(function() {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': "../data/data.csv?t="+new Date().getTime(),
'success': function (data) {
json = data;
}
});
var count = json.replace(/[^\n]/g, '').length;
var i = count - 1;
var lines = json.split("\n");
var items = lines[i].split(",");
callback(items);
}, limit);
}
getData(1000, function (items){
//Used to remove the last scene
document.getElementById("wave").innerHTML = '';
//Start to draw the waving curve
var siriWave = new SiriWave({
container: document.getElementById('wave'),
width: 1920,
height: 400,
speed: items[1],
frequency: items[2],
autostart: true
});
});
サンプルデータ（csv形式で）ここにある：
2016-07-20, 100, 20
2016-07-21, 120, 40
2016-07-22, 140, 60
問題は、曲線は次の更新された状態に現在の状態から急に変化することです。誰もがアニメーションの問題を解決する方法のアイデアを持っていますか？バックエンドソリューションとフロントエンドソリューションの両方を歓迎します。どうもありがとう。
この質問は、広すぎる、意見に基づいている、または議論が必要なので、スタックオーバーフローのトピックではありません。具体的な、解決可能な、プログラミングの問題がある場合は、詳細を記入してください。 –
これはあいまいです。あなたのところに同僚が来て、「私のアニメーションはうまくいかない」と想像してみてください。あなたならどうしますか？おそらく、実際のコードを見てみる：http://stackoverflow.com/help/mcve –
私はいくつかの最小のシミュレートされたデータ（ajaxが読み込まれる必要はありません）で[mcve]を作成する必要があると思われますあなたがしていることを見てください。 –