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

Question

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

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

Answer 1

fetch_more()在mobile.js中添加了 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中完成（通过.loadingparent 的类div）：

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

这两个文件都非常紧凑，因此上面的代码片段取自使用通过 google 找到的工具美化的版本。