我正在尝试创建一个简单的实时更新(或足够接近)的排行榜表但是我希望它是动画的。我已经能够使用加载另一个 PHP 页面的简单 AJAX 脚本创建每秒更新一次的更新表。这一切工作正常并按应有的方式显示表格，但我不知道如果另一个游戏的分数比他们高，如何让它向上/向下动画。
我做了什么:
leaderboard.html
<html>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#Refresh").load("leaderboardupdate.php");
var refreshId = setInterval(function() {
$("#Refresh").load('leaderboardupdate.php');
}, 1000);
$.ajaxSetup({ cache: false });
});
</script>
</html>
leaderboardupdate.php
<?php
$sql = "SELECT Name, Kills FROM Table ORDER BY Kills DESC LIMIT 5";
$result = $conn->query($sql);
echo '<div id="container">';
while($row = $result->fetch_assoc()) {
<div class="row">
<div class="name">'. $row["Name"] .'</div>
<div class="score">' .$row["Kills"]. '</div>
</div>';
}
echo '</div>';
?>
就像我说的那样，这成功地创建了一个表并更新了数据(按照 SQL 查询中的杀戮顺序)，但是如果他们在杀戮方面超过了另一个玩家，我想制作一个动画行。
我能找到的最接近的例子: https://codepen.io/bsngr/pen/WbLEvp
我调查了Socket.IO ，虽然它允许我获得实时数据，但我认为它不允许我向上/向下设置行动画，这就是我面临的问题。
最佳答案
你是对的 sockets.io 不会让你这样做，因为它与动画没有任何关联，但是它们会通过让你的 ap 知道“何时制作动画”来让你制作动画。上次我检查 sockets.io 是为了 node.js 不确定他们是否支持 PHP 或者 PHP 已开始支持 WebSockets。
WebSockets 主要是在您的客户端和服务器之间建立连接。他们致力于发布、订阅模式。所以你的服务器将打开一个连接，你的客户端将订阅它。一旦建立了服务器和客户端之间的连接，您的服务器将能够发布更改，而客户端将能够收听它们。粗略的实现看起来像这样。首先，您需要在客户端中打开一个 channel ，以便服务器和客户端可以通过它进行通信。
<script>
var connection = sockets.open(`user-${userID}`) // will open a channel for some user
// once the connection is established you can listen to events
connection.on('update', function(data) {
//perfect place to animate stuff and update data
})
然后在你的后端
<?php
$results = $conn->UpdateSomething(); // the place in your code where actions happen;
$socketConnection.trigger($channel, 'update', $results) // this will trigger update event on a $channel with data $results
?>
您还可以使用 ServiceWorkers、LongPolling 和 ShortPolling 来监听实时变化并根据服务器触发的事件修改您的 DOM
制作动画的步骤
为了制作实际的动画，您可以按照以下步骤操作
1 - 找到包含新领导者的 dom 元素，您可以通过 getElementById 轻松完成，并为棋盘中的每个元素提供唯一 ID。
2 - 获得前任领导者，理想情况下他仍将位于您的排行榜榜首
3 - 完成后，按照这个例子Swapping two HTML elements visually and on the DOM, and animate it all? .在此示例中，clickedDiv 是您的新领导者，prev 是您的旧领导者。
关于javascript - 如何创建动画实时排行榜？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52739830/