移动应用程序上的Reddit Alien动画是如何工作的？

Question

有人知道移动应用程序上的Reddit Alien动画是如何工作的吗？此动画随加载时间而变化。

这是通过Ajax调用在经过一定时间后更改图像来实现的吗？

Answer 1

在mobile.js的fetch_more()中添加了Snoo的图片

function fetch_more()
{
    $("#siteTable").after($("<div class='loading'><img src='" + r.utils.staticURL("reddit_loading.png") + "'/></div>"));
    var a = document.location,
        c = a.pathname.split("."),
        c = c[c.length - 1].indexOf("/") == -1 ? c.slice(0, -1).join(".") : a.pathname,
        a = a.protocol + "//" + a.host + c + ".json-compact" + a.search,
        c = $("#siteTable").find(".thing:last");
    a += (document.location.search ? "&" : "?") + "after=" + c.thing_id();
    c.find(".rank").length && parseInt(c.find(".rank").html());
    $.getJSON(a, function (a)
    {
        $.insert_things(a.data, !0);
        $(".thing").click(function ()
        {});
        $("#siteTable").next(".loading").remove();
        a && a.data.length == 0 && $(window).unbind("scroll")
    })
};

实际的动画是在compact.css中完成的(通过父div的.loading类)：

.loading img {
    -webkit-animation-name: rotateThis;
    -webkit-animation-duration: .5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

这两个文件都是高度压缩的，所以上面的代码片段取自通过google找到的工具美化过的版本。