AsciiMorphascii 動畫庫

AsciiMorph 是一個可在兩個 ascii 圖像之間動畫過渡的庫。

演示

使用

用 dom 元素渲染 ascii

<!-- Pre elements are perfect for this. -->
<pre class="ascii-element">
</pre>

初始化庫：

// Initialize AsciiMorph
var element = document.querySelector('pre');
AsciiMorph(element, {x: 50,y: 25});

渲染元素，然后變形成你想要的圖形：

// First, define some ascii art.
var bird = [
 "                             /",
 "                            /",
 "                           /;",
 "                          //",
 "                         ;/",
 "                       ,//",
 "                   _,-' ;_,,",
 "                _,'-_  ;|,'",
 "            _,-'_,..--. |",
 "    ___   .'-'_)'  ) _)\\|      ___",
 "  ,'\"\"\"`'' _  )   ) _)  ''--'''_,-'",
 "-={-o-  /|    )  _)  ) ; '_,--''",
 "  \\ -' ,`.  ) .)  _)_,''|",
 "   `.\"(   `------''     /",
 "     `.\\             _,'",
 "       `-.____....-\\\\",
 "                 || \\\\",
 "                 // ||",
 "                //  ||",
 "            _-.//_ _||_,",
 "              ,'  ,-'/"
 ]

var mona = [
 "         ____",
 "        o8%8888,",
 "      o88%8888888.",
 "     8'-    -:8888b",
 "    8'         8888",
 "   d8.-=. ,==-.:888b",
 "   >8 `~` :`~' d8888",
 "   88         ,88888",
 "   88b. `-~  ':88888",
 "   888b ~==~ .:88888",
 "   88888o--:':::8888",
 "   `88888| :::' 8888b",
 "   8888^^'       8888b",
 "  d888           ,%888b.",
 " d88%            %%%8--'-.",
 "/88:.__ ,       _%-' ---  -",
 "    '''::===..-'   =  --.  `",
 ]

// Then, you can render (will render instantly)
AsciiMorph.render(bird);

// Then morph, to a new creation
AsciiMorph.morph(mona);