Dom Animator是一款非常神奇的可以在浏览器控制台中执行源码动画的js插件。当你写了一段HTML源码拿去发布的时候,是否想别人在控制台上查看你的源码时让人感觉与众不同?该js插件可以帮助你将指定的ASCII字符组成的多幅图案制作为动画,在控制台中显示。

dom-animator.js是单独的js文件,没有任何jQuery等外部依赖。不需要写CSS样式和HTML标签,它会将生成的动画显示在源码顶部的注释里面。

使用方法

dom-animator.js动画可以非常简单,也可以非常复杂。取决于你想制作什么动画效果。首先你需要创建一个新的domAnimator对象实例(前提是你已经引入了dom-animator.js文件),然后可以通过addFrame()方法来创建字符动画。下面是一个非常简单的动画-眨眼动画效果。

<script>
    var domAnimator = new DomAnimator();
    domAnimator.addFrame('o_o');
    domAnimator.addFrame('-_o');
    domAnimator.animate();
</script>                
              

上面的眨眼的字符动画效果会显示在同一行中。如果你想字符显示为多行,可以在addFrame方法中传入一系列的字符串,通过逗号隔开。

<script>
    var domAnimator = new DomAnimator();
    domAnimator.addFrame(['0_0', ' | ', ' | ']);
    domAnimator.addFrame(['0_-', ' | ', ' | ']);
    domAnimator.animate();
</script>                  
              

你也可以为所有的动画帧设置一个速度。默认的动画速度是500毫秒(这个速度是ASCII字符动画速度,而不是60fps)。

<script>
    var domAnimator = new DomAnimator();
    domAnimator.addFrame('o_o');
    domAnimator.addFrame('-_o');
    domAnimator.animate(1000); //ms
</script>                  
              

如果你想停止动画,可以调用stop方法。

<script>
    // Setup
    var domAnimator = new DomAnimator();
    domAnimator.addFrame('o_o');
    domAnimator.addFrame('-_o');
    domAnimator.animate();

    // After 10 seconds.
    setTimeout(function() {
        domAnimator.stop(); // Stop the animation
    }, 10000);
</script>                  
              

浏览器支持

这个控制台源码字符动画插件已经在最新版本的Safari、Chrome 和 Firefox浏览器中进行了测试。在Chrome中动画效果最好,因为Chrome浏览器在控制台中支持新行。

另外为大家分享一个大量ASII字符生成图像的网站:http://www.geocities.ws/SoHo/7373/zoo.html