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);
评论