本文分享的是一个动画效果源码，演示JS代码是如何被加密的。

先看效果：

一般我们在进行JS加密时，提交原始代码，紧接着就直接得到了加密代码，混淆加密过程是黑盒状态，是不被我们知道的。

这个动画，用慢放的效果，逐帧演示了JS代码在进行混淆加密时发生的变化。

比如：变量名变短、回车换行消失、空格删除、消除注释、函数调用变成自执行函数。

注：动画演示的是JShaman专业版使用部分功能对JS代码进行混淆加密的效果。

下面给出这个动画完整源码，保存为html文件即可使用：

<h2>动画演示：JShaman是怎样对JS代码混淆加密的</h2><button onclick="mini_change();">开始</button><br><br><textarea id="js_code" style="width:800px; height:200px;font-size:19px;">function get_copyright(){    var domain = "JShaman专注于JS代码混淆加密";    var from_year = 2017;    var the_copyright = "(c)" + from_year + "-" + (new Date).getFullYear() + "," + domain;    return the_copyright;}//输出信息console.log(get_copyright());</textarea><br>注：演示的是JShaman专业版部分效果<script>    var index = 0;    var js_code_textarea = document.getElementById("js_code");    var change_matrix = [        ["\n",""],        ["    ",""],        ["var domain","var _"],        ["\n",""],        ["    ",""],        ["var from_year","var _2"],        ["\n",""],        ["    ",""],        ["var the_copyright","var _3"],        ["from_year","_2"],        ["\n",""],        ["    ",""],        ["\n",""],        ["the_copyright","_3"],        ["domain","_"],        ["\n",""],        ["//输出信息",""],        ["\n",""],        ["function get_copyright(){",""],        ["}",""],        ["get_copyright()","function(){"+`var _ = "JShaman专注于JS代码混淆加密";var _2 = 2017;var _3 = "(c)" + _2 + "-" + (new Date).getFullYear() + "," + _;return _3;`+"}()"],        [`var _ = "JShaman专注于JS代码混淆加密";var _2 = 2017;var _3 = "(c)" + _2 + "-" + (new Date).getFullYear() + "," + _;return _3;`,""],    ]        function mini_change(){        js_code_textarea.value = js_code_textarea.value.replace(change_matrix[index][0], change_matrix[index][1]);        index++;        console.log(index[0]);        if(index >change_matrix.length-1){            console.log("执行");            eval(js_code_textarea.value);            alert("演示完成");            return;        }else{            setTimeout(mini_change,1000);        }    }</script> 

这段代码中，应用了一些不错的JS技巧，参考修改，也可以用来做其它文本演示动画。