可以在浏览器控制台中执行源码字符动画的js插件-HTML源码网

可以在浏览器控制台中执行源码字符动画的js插件

发布5年前浏览960次上传者

ayumi

1.8 金币 VIP免费

特别声明：本站所有资源均来源于互联网，如有侵权请联系站长(44784009#qq.com),将第一时间删除，源码仅供参考学习，请勿商用或其它非法用途，否则一切后果用户自负！

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>