【译】用 JavaScript 和 Emoji 作地址栏动画

• 原文地址：Animating URLs with Javascript and Emojis
• 原文做者：Matthew Rayfield
• 译者：Wpeach

你能够在地址栏使用 emoji（和其它图形 unicode 字符），这看着很棒，可是好像没人这么作，为何呢？也许 emoji 对于正常的网络平台来讲太过异国情调了？或许是他们由于惧怕不利于SEO？

无论什么缘由，维恩图中的合理性观点“没人这么作，但这是可能的”是让我兴奋的点。因此我决定花费一些时间研究在地址栏中图形字符的可能性，特别是经过 JavaScript 给这些字符加上动画。

循环动画

首先，确保你页面的 JavaScript 代码是 UTF-8 编码，不然没法在你的代码中显示 emoji，这能够经过设置 HTTP 头部或页面的 META 标签来实现。你极可能不用担忧这个，但你能够在这里找到更多信息：Unicode in Javascript by Flavio。

为了达到咱们想要的效果，让 emoji 像小仙女同样在地址栏里恰恰起舞，咱们须要一个循环，实际上，咱们所须要的只是一个循环，咱们启动这个循环，它不断循环，咱们的目的就达到了。这是咱们的第一个循环动画，一个旋转的emoji 月亮。我猜当他们添加这个 emoji 序列时，也有这个想法吧？

var f = ['🌑', '🌒', '🌓', '🌔', '🌝', '🌖', '🌗', '🌘'];

    function loop() {
        location.hash = f[Math.floor((Date.now()/100)%f.length)];

        setTimeout(loop, 50);
    }

    loop();
复制代码

运行代码，你能够在地址栏看到此循环的结果。

若是你不喜欢旋转的月亮，你能够选择任何你喜欢的 emoji 来替换这个数组，好比一个时钟：

var f = ['🕐','🕑','🕒','🕓','🕔','🕕','🕖','🕗','🕘','🕙','🕚','🕛'];
复制代码

这是一个很是简单的例子，真的很是简单，因此咱们来升级一下循环，让它显示一串 emoji ! 此次咱们使用 emoji 的skin tone modifiers肤色调节属性来制做一些变色宝宝：

var e = ['🏻', '🏼', '🏽', '🏾', '🏿'];

    function loop() {
        var s = '',
            i, m;

        for (i = 0; i < 10; i ++) {
            m = Math.floor(e.length * ((Math.sin((Date.now()/100) + i)+1)/2));
            s += '👶' + e[m];
        }

        location.hash = s;

        setTimeout(loop, 50);
    }

    loop(); 
复制代码

咱们可使用时间和位置控制的正弦波来选择咱们想要的颜色，这给了咱们一个很好的颜色变幻效果！

好比咱们再来一次月亮旋转，使它展开，制做一个相似于加载条的动画？好的，开始实现：

var f = ['🌑', '🌘', '🌗', '🌖', '🌕', '🌔', '🌓', '🌒'],
        d = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        m = 0;

    function loop() {
        var s = '', x = 0;

        if (!m) {
            while (d[x] == 4) {
                x ++;
            }

            if (x >= d.length) m = 1;
            else {
                d[x] ++;
            }
        }
        else {
            while (d[x] == 0) {
                x ++;
            }

            if (x >= d.length) m = 0;
            else {
                d[x] ++;

                if (d[x] == 8) d[x] = 0;
            }
        }

        d.forEach(function (n) {
            s += f[n];
        });

        location.hash = s;

        setTimeout(loop, 50);
    }

    loop();
复制代码

探索其它字符

不止是 emoji 给咱们提供了一种在地址栏显示图形的方法，咱们的目标中也有一些 unicode 字符。

特别有趣的是 框线字符:

它们中不少更适合二维输出，但它们在一维输出也很棒，例如，咱们能够建立一个多个高度变化的块字符串，并构造一个漂亮的小波浪动画：

function loop() {
        var i, n, s = '';

        for (i = 0; i < 10; i++) {
            n = Math.floor(Math.sin((Date.now()/200) + (i/2)) * 4) + 4;

            s += String.fromCharCode(0x2581 + n);
        }

        window.location.hash = s;

        setTimeout(loop, 50);
    }

    loop();
复制代码

我很是喜欢它的效果，我把它永久放在了 wavyurl.com 上。

使用可变宽度字符，咱们甚至在水平方向上摆动，建立相似于进度条的东西：

function loop() {
        var s = '',
            p;

        p = Math.floor(((Math.sin(Date.now()/300)+1)/2) * 100);

        while (p >= 8) {
            s += '█';
            p -= 8;
        }
        s += ['⠀','▏','▎','▍','▌','▋','▊','▉'][p];

        location.hash = s;
        setTimeout(loop, 50);
    }
复制代码

进度条？这看起来，仍是有用的，这让我想到了……

在地址栏显示视频进度

为了增长咱们小实验的可能性，我提出了在地址栏中显示网络视频进度的想法。我只需附加一个函数，将咱们的进度字符串定义在视频的timeupdate事件中，瞧！地址栏中的视频进度条包含时间和持续时间！

var video;

    function formatTime(seconds) {
        var minutes = Math.floor(seconds/60),
            seconds = Math.floor(seconds - (minutes*60));

        return ('0'+minutes).substr(-2) + ':' + ('0'+seconds).substr(-2);
    }

    function renderProgressBar() {
        var s = '',
            l = 15,
            p = Math.floor(video.currentTime / video.duration * (l-1)),
            i;

        for (i = 0; i < l; i ++) {
            if (i == p) s +='◯';
            else if (i < p) s += '─';
            else s += '┄';
        }

        location.hash = '╭'+s+'╮'+formatTime(video.currentTime)+'╱'+formatTime(video.duration);
    }

    video = document.getElementById('video');
    video.addEventListener('timeupdate', renderProgressBar);
复制代码

我比较喜欢这个线条和圆组成的进度条，若是你喜欢别的 emoji 好比月亮，我也能让你满意：

var e = ['🌑', '🌘', '🌗', '🌖', '🌕'],
        video;

    function formatTime(seconds) {
        var minutes = Math.floor(seconds/60),
            seconds = Math.floor(seconds - (minutes*60));

        return ('0'+minutes).substr(-2) + ':' + ('0'+seconds).substr(-2);
    }

    function renderProgressBar() {
        var s = '',
            c = 0,
            l = 10,
            p = Math.floor(video.currentTime / video.duration * ((l*5)-1)),
            i;

        while (p >= 5) {
            s += e[4];
            c ++;
            p -= 5;
        }
        s += e[p];
        c ++;

        while (c < l) {
            s += e[0];
            c ++;
        }

        location.hash = s+formatTime(video.currentTime)+'╱'+formatTime(video.duration);
    }

    video = document.getElementById('video');
    video.addEventListener('timeupdate', renderProgressBar);
复制代码

好的，将此进度条称为“有用”的延伸。 只瞄一眼，我也能够看到在视频分享 URL 中的进度。 与YouTube同样，你能够选择在特定时间建立指向视频的连接，添加视觉指示是否是很酷？嗯？

也许我尚未提出一些更有用的“技术”实现，我会继续思考这个问题。 嘿，也许你能够尝试一些东西？

最后

你可能想知道为何我使用location.hash =，而不是新且酷的HTML5 History API。 有两个缘由：

第一个问题是 History API有一个特色：它实际上更改了整个 URL 路径，而不只仅是 hash。 所以，若是我使用 History API 并将页面更改成/🌑🌘🌗🌖🌕，它看起来会比添加 ＃ 更好。 但这也意味着个人 Web 服务器必须可以响应/🌑🌘🌗🌖🌕，不然若是用户刷新或以其余方式导航到修改后的 URL 将会失败。 这是可行的，但比使用location.hash =更复杂，须要我修改服务器配置。

第二个问题有些出乎意料。 实际上，在我测试的3个浏览器中，有2个历史API被限制的。 若是我以极快的速度将个人波形网址推送到地址栏，我最终会在 Chrome 中收到如下错误：

Throttling history state changes to prevent the browser from hanging.

Safari 给咱们提供了更详细的信息：

SecurityError: Attempt to use history.pushState() more than 100 times per 30.000000 seconds

如今，若是让我保持在这个限制下也行，可是每秒3帧只是不会影响我目前的动画效果。

好孩子 Firefox 彷佛并不在意我推送新历史的次数和速度，这真是想得太周到了。可是，两个主要的浏览器受到影响，加上须要web服务器配置来修复第一个问题，使我更愿意忍受 URL 中的 #。

结语

我就讲到这里。但我要告诉你，我还有一些想法，让小游戏显示在地址栏。特别是考虑到盲文字符咱们尚未探索，因此请继续关注。

若是你有任何问题、评论，或者只是想了解个人最新进展，请在 Twitter 上关注我: @MatthewRayfield。或者点这里订阅个人几乎从未被打扰过的电子邮件。

哦，若是你想要以上示例的源代码，点这下载。