原文地址

先睹为快

如下图，代码在自己一行一行写程序，逐渐画出一个喜气灯笼的模样(PC移动端都支持噢)，想不想知道是它怎么实现的呢？和胖头鱼一起来探究一番吧O(∩_∩)O~
你也可以直接点击用程序自动画了一个灯笼体验一番，胖头鱼的掘金活动仓库查看源码
2022/01/19 几个骚操作，让代码自动学会画画，太好玩啦！ - 图1

原理探究

这个效果就好像一个打字员在不断地录入文字，页面呈现动态效果。又好像一个早已经录制好影片，而我们只是坐在放映机前观看。
原理本身也非常简单，只要你会一点点前端知识，就可以马上亲手做一个出来

1. 滚动的代码

定时器字符累加： 相信聪明的你早已经猜到屏幕中滚动的html、css代码就是通过启动一个定时器，然后将预先准备好的字符，不断累加到一个pre标签中。

2. 灯笼的布局

动态添加html片段和css片段：，一张静态网页由html和css组成，灯笼能不断地发生变化，背后自然是组成灯笼的html和css不断变化的结果。

3. 例子解释

想象一下你要往一张网页每间隔0.1秒增加一个啊字，是不是开个定时器，间断地往body里面塞啊，就可以啊！没错，做到这一步就完成了原理的第一部分
再想象一下，在往页面里面塞啊的时候，我还想改变啊字的字体颜色以及网页背景颜色，那应该怎么做呢，是不是执行下面的代码就可以呢?
.xxx{ color: blue; background: red; } 复制代码
没错，只不过更改字体和背景色不是突然改变的，而是开个定时器，间断地往style标签中塞入以下代码，这样就完成了原理的第二步，是不是好简单 ， 接下来让我们一步步完成它。

简要解析

1.编辑器布局

工欲善其事，必先利其器。在实现代码自己画画的前提是有个类似编辑器地方给他show，所以会有编辑html、css和预览三个区域。
移动端布局
上下结构布局，上面是html、css的编辑区域，下面的灯笼的展示区域
2022/01/19 几个骚操作，让代码自动学会画画，太好玩啦！ - 图2
PC端布局
左右结构布局，左边是html、css的编辑区域，右边是灯笼的展示区域
2022/01/19 几个骚操作，让代码自动学会画画，太好玩啦！ - 图3

模板

  1. <template>
  2.   <div :class="containerClasses">
  3.     <div class="edit">
  4.       <div class="html-edit" ref="htmlEditRef">
  5.         <!-- 这是html代码编辑区域 -->
  6.         <pre v-html="htmlEditPre" ref="htmlEditPreRef"></pre>
  7.       </div>
  8.       <div class="css-edit" ref="cssEditRef">
  9.         <!-- 这是css代码编辑区域 -->
  10.         <pre v-html="styleEditPre"></pre>
  11.       </div>
  12.     </div>
  13.     <div class="preview">
  14.       <!-- 这是预览区域，灯笼最终会被画到这里噢 -->
  15.       <div class="preview-html" v-html="previewHtmls"></div>
  16.       <!-- 这里是样式真正起作用的地方，密码就隐藏... -->
  17.       <div v-html="previewStyles"></div>
  18.     </div>
  19.   </div>
  20. </template>

端控制
简单的做一下移动端和PC端的适配，然后通过样式去控制布局即可

  1. computed: {
  2. containerClasses () {
  3.   // 做一个简单的适配
  4.   return [
  5.     'container',
  6.     isMobile() ? 'container-mobile' : ''
  7.   ]
  8. }
  9. }

2.代码高亮

示例中的代码高亮是借助prismjs和pre进行转化处理的，只需要填充你想要高亮的代码，以及选择高亮的语言就可以实现上述效果。

  1. // 核心代码,只有一行
  2. this.styleEditPre = Prism.highlight(previewStylesSource, Prism.languages.css)

通过preview-html``承载html片段，通过previewStyles承载由style标签包裹的css样式

  1. // 容器
  2. <div class="preview">
  3.   <!-- 这是预览区域，灯笼最终会被画到这里噢 -->
  4.   <div class="preview-html" v-html="previewHtmls"></div>
  5.   <!-- 这里是样式真正起作用的地方 -->
  6.   <div v-html="previewStyles"></div>
  7. </div>

逻辑代码

  1. // 样式控制核心代码
  2. this.previewStyles = `
  3.   <style>
  4.     ${previewStylesSource}
  5.   </style>
  6. `
  7. // html控制核心代码
  8. this.previewHtmls = previewHtmls

4. 代码配置预览

我们通过一个个步骤将代码按阶段去执行，而代码本身是通过两个文件进行配置的，一个是控制html的文件，一个是控制css的文件。每一个步骤都是数组的一项

4.1 html配置

注意下面的代码格式是故意弄成这种格式的，并非是没有对齐

  1. export default [
  2.   // 开头寒暄
  3.   `
  4.   <!-- 
  5.     XDM好，我是前端胖头鱼~~~
  6.     听说掘金又在搞活动了，奖品还很丰厚...
  7.     我能要那个美腻的小姐姐吗？
  8.   -->
  9.   `,
  10.   // 说明主旨
  11.   `
  12.   <!-- 
  13.     以前都是用“手”写代码，今天想尝试一下
  14.     “代码写代码”,自动画一个喜庆的灯笼
  15.   -->  
  16.   `,
  17.   // 创建编辑器
  18.   `
  19.   <!-- 
  20.     第①步，先创建一个编辑器
  21.   -->  
  22.   `,
  23.   // 创建编辑器html结构
  24.   ` 
  25.   <div class="container">
  26.     <div class="edit">
  27.       <div class="html-edit">
  28.         <!-- 这是html代码编辑区域 -->
  29.         <pre v-html="htmlEditPre">
  30.           <!-- htmlStep0 -->
  31.         </pre>
  32.       </div>
  33.       <div class="css-edit">
  34.         <!-- 这是css代码编辑区域 -->
  35.         <pre v-html="cssEditPre"></pre>
  36.       </div>
  37.     </div>
  38.     <div class="preview">
  39.       <!-- 这是预览区域，灯笼最终会被画到这里噢 -->
  40.       <div class="preview-html"></div>
  41.       <!-- 这里是样式真正起作用的地方，密码就隐藏... -->
  42.       <div v-html="cssEditPre"></div>
  43.     </div>
  44.   </div>
  45.   `,
  46.   // 开始画样式
  47.   `
  48.   <!-- 
  49.     第②步，给编辑器来点样式，我要开始画了喔~~
  50.   -->  
  51.   `,
  52.   // 画灯笼的大肚子
  53.   `
  54.           <!-- 第③步，先画灯笼的大肚子结构 -->
  55.           <div class="lantern-container">
  56.             <!-- htmlStep1 -->
  57.             <!-- 大红灯笼区域 -->
  58.             <div class="lantern-light">
  59.             <!-- htmlStep2 -->
  60.             </div>
  61.           </div>
  62.   `,
  63.   // 提着灯笼的线
  64.   `
  65.             <!-- 第④步，灯笼顶部是有根线的 -->
  66.             <div class="lantern-top-line"></div>
  67.   `,
  68.   `
  69.               <!-- 第⑤步，给灯笼加两个盖子 -->
  70.               <div class="lantern-hat-top"></div>
  71.               <div class="lantern-hat-bottom"></div>
  72.               <!-- htmlStep3 -->
  73.   `,
  74.   `
  75.               <!-- 第⑥步，感觉灯笼快要成了，再给他加上四根线吧 -->
  76.               <div class="lantern-line-out">
  77.                 <div class="lantern-line-innner">
  78.                   <!-- htmlStep5 -->
  79.                 </div>
  80.               </div>
  81.               <!-- htmlStep4 -->
  82.   `,
  83.   `
  84.               <!-- 第⑦步，灯笼是不是还有底部的小尾巴呀 -->
  85.               <div class="lantern-rope-top">
  86.                 <div class="lantern-rope-middle"></div>
  87.                 <div class="lantern-rope-bottom"></div>
  88.               </div>
  89.   `,
  90.   `
  91.                 <!-- 第⑧步，最后当然少不了送给大家的福啦 -->
  92.                 <div class="lantern-fu">福</div>
  93.   `
  95. ]

4.2 css配置

  1. export default [
  2.   // 0. 添加基本样式
  3.   `
  4.   /* 首先给所有元素加上过渡效果 */
  5.   * {
  6.     transition: all .3s;
  7.     -webkit-transition: all .3s;
  8.   }
  9.   /* 白色背景太单调了，我们来点背景 */
  10.   html {
  11.     color: rgb(222,222,222); 
  12.     background: rgb(0,43,54); 
  13.   }
  14.   /* 代码高亮 */
  15.   .token.selector{ 
  16.     color: rgb(133,153,0); 
  17.   }
  18.   .token.property{ 
  19.     color: rgb(187,137,0); 
  20.   }
  21.   .token.punctuation{ 
  22.     color: yellow; 
  23.   }
  24.   .token.function{ 
  25.     color: rgb(42,161,152); 
  26.   }
  27.   `,
  28.   // 1.创建编辑器本身的样式
  29.   `
  30.   /* 我们需要做一个铺满全屏的容器 */
  31.     .container{
  32.       width: 100%;
  33.       height: 100vh;
  34.       display: flex;
  35.       justify-content: space-between;
  36.       align-items: center;
  37.     }
  38.     /* 代码编辑区域50%宽度，留一些空间给预览区域 */
  39.     .edit{
  40.       width: 50%;
  41.       height: 100%;
  42.       background-color: #1d1f20;
  43.       display: flex;
  44.       flex-direction: column;
  45.       justify-content: space-between;
  46.     }
  48.     .html-edit, .css-edit{
  49.       flex: 1;
  50.       overflow: scroll;
  51.       padding: 10px;
  52.     }
  54.     .html-edit{
  55.       border-bottom: 5px solid #2b2e2f;
  56.     }
  57.     /* 预览区域有50%的空间 */
  58.     .preview{
  59.       flex: 1;
  60.       height: 100%;
  61.       background-color: #2f1f47;
  62.     }
  64.     .preview-html{
  65.       display: flex;
  66.       align-items: center;
  67.       justify-content: center;
  68.       height: 100%;
  69.     }
  71.     /* 好啦~ 你应该看到一个编辑器的基本感觉了，我们要开始画灯笼咯 */
  72.   `,
  73.   // 2
  74.   `
  75.   /* 给灯笼的大肚子整样式 */
  76.   .lantern-container {
  77.     position: relative;
  78.   }
  80.   .lantern-light {
  81.     position: relative;
  82.     width: 120px;
  83.     height: 90px;
  84.     background-color: #ff0844;
  85.     border-radius: 50%;
  86.     box-shadow: -5px 5px 100px 4px #fa6c00;
  87.     animation: wobble 2.5s infinite ease-in-out;
  88.     transform-style: preserve-3d;
  89.   }
  90.   /* 让他动起来吧 */
  91.   @keyframes wobble {
  92.     0% {
  93.       transform: rotate(-6deg);
  94.     }
  96.     50% {
  97.       transform: rotate(6deg);
  98.     }
  100.     100% {
  101.       transform: rotate(-6deg);
  102.     }
  103.   }
  104.   `,
  105.   // 3
  106.   `
  107.   /* 顶部的灯笼线 */
  108.   .lantern-top-line {
  109.     width: 4px;
  110.     height: 50px;
  111.     background-color: #d1bb73;
  112.     position: absolute;
  113.     left: 50%;
  114.     transform: translateX(-50%);
  115.     top: -20px;
  116.     border-radius: 2px 2px 0 0;
  117.   }
  118.   `,
  119.   // 4
  120.   `
  121.   /* 灯笼顶部、底部盖子样式 */
  122.   .lantern-hat-top,
  123.   .lantern-hat-bottom {
  124.     content: "";
  125.     position: absolute;
  126.     width: 60px;
  127.     height: 12px;
  128.     background-color: #ffa500;
  129.     left: 50%;
  130.     transform: translateX(-50%);
  131.   }
  132.   /* 顶部位置 */
  133.   .lantern-hat-top {
  134.     top: -8px;
  135.     border-radius: 6px 6px 0 0;
  136.   }
  137.   /* 底部位置 */
  138.   .lantern-hat-bottom {
  139.     bottom: -8px;
  140.     border-radius: 0 0 6px 6px;
  141.   }
  142.   `,
  143.   // 5
  144.   `
  145.   /* 灯笼中间的线条 */
  146.   .lantern-line-out,
  147.   .lantern-line-innner {
  148.     height: 90px;
  149.     border-radius: 50%;
  150.     border: 2px solid #ffa500;
  151.     background-color: rgba(216, 0, 15, 0.1);
  152.   }
  153.   /* 线条外层 */
  154.   .lantern-line-out {
  155.     width: 100px;
  156.     margin: 12px 8px 8px 10px;
  157.   }
  158.   /* 线条内层 */
  159.   .lantern-line-innner {
  160.     margin: -2px 8px 8px 26px;
  161.     width: 45px;
  162.     display: flex;
  163.     align-items: center;
  164.     justify-content: center;
  165.   }
  166.   `,
  167.   // 6
  168.   `
  169.   /* 灯笼底部线条 */
  170.   .lantern-rope-top {
  171.     width: 6px;
  172.     height: 18px;
  173.     background-color: #ffa500;
  174.     border-radius: 0 0 5px 5px;
  175.     position: relative;
  176.     margin: -5px 0 0 60px;
  177.     /* 让灯穗也有一个动画效果 */
  178.     animation: wobble 2.5s infinite ease-in-out;
  179.   }
  181.   .lantern-rope-middle,
  182.   .lantern-rope-bottom {
  183.     position: absolute;
  184.     width: 10px;
  185.     left: -2px;
  186.   }
  188.   .lantern-rope-middle {
  189.     border-radius: 50%;
  190.     top: 14px;
  191.     height: 10px;
  192.     background-color: #dc8f03;
  193.     z-index: 2;
  194.   }
  196.   .lantern-rope-bottom {
  197.     background-color: #ffa500;
  198.     border-bottom-left-radius: 5px;
  199.     height: 35px;
  200.     top: 18px;
  201.     z-index: 1;
  202.   }
  203.   `,
  204.   // 7
  205.   `
  206.   /* 福样式 */
  207.   .lantern-fu {
  208.     font-size: 30px;
  209.     font-weight: bold;
  210.     color: #ffa500;
  211.   }
  212.   `
  213. ]

整体流程

实现原理和整个过程所需的知识点，通过简要解析相信你已经明白了，接下来我们要做的事情就是把这些知识点组合在一起，完成自动画画。

  1. import Prism from 'prismjs'
  2. import htmls from './config/htmls'
  3. import styles from './config/styles'
  4. import { isMobile, delay } from '../../common/utils'
  6. export default {
  7.   name: 'newYear2022',
  8.   data () {
  9.     return {
  10.       // html代码展示片段
  11.       htmlEditPre: '',
  12.       htmlEditPreSource: '',
  13.       // css代码展示片段
  14.       styleEditPre: '',
  15.       // 实际起作用的css
  16.       previewStylesSource: '',
  17.       previewStyles: '',
  18.       // 预览的html
  19.       previewHtmls: '',
  21.     }
  22.   },
  23.   computed: {
  24.     containerClasses () {
  25.       // 做一个简单的适配
  26.       return [
  27.         'container',
  28.         isMobile() ? 'container-mobile' : ''
  29.       ]
  30.     }
  31.   },
  32.   async mounted () {
  33.     // 1. 打招呼
  34.     await this.doHtmlStep(0)
  35.     // 2. 说明主旨
  36.     await this.doHtmlStep(1)
  38.     await delay(500)
  40.     // 3. 第一步声明
  41.     await this.doHtmlStep(2)
  43.     await delay(500)
  44.     // 4. 创建写代码的编辑器
  45.     await this.doHtmlStep(3)
  46.     await delay(500)
  47.     // 5. 准备写编辑器的样式
  48.     await this.doHtmlStep(4)
  49.     await delay(500)
  50.     // 6. 基本样式
  51.     await this.doStyleStep(0)
  52.     await delay(500)
  53.     // 7. 编辑器的样式
  54.     await this.doStyleStep(1)
  55.     await delay(500)
  56.     // 8. 画灯笼的大肚子html
  57.     await Promise.all([ 
  58.       this.doHtmlStep(5, 0), 
  59.       this.doEffectHtmlsStep(5, 0),
  60.     ])
  61.     await delay(500)
  62.     // 8. 画灯笼的大肚子css
  63.     await this.doStyleStep(2)
  64.     await delay(500)
  65.     // 9. 提着灯笼的线html
  66.     await Promise.all([ 
  67.       this.doHtmlStep(6, 1), 
  68.       this.doEffectHtmlsStep(6, 1),
  69.     ])
  70.     await delay(500)
  71.     // 10. 提着灯笼的线css
  72.     await this.doStyleStep(3)
  73.     await delay(500)
  74.     // 11. 给灯笼加两个盖子html
  75.     await Promise.all([ 
  76.       this.doHtmlStep(7, 2), 
  77.       this.doEffectHtmlsStep(7, 2),
  78.     ])
  79.     await delay(500)
  80.     // 12. 给灯笼加两个盖子css
  81.     await this.doStyleStep(4)
  82.     await delay(500)
  83.     // 13. 感觉灯笼快要成了，再给他加上四根线吧html
  84.     await Promise.all([ 
  85.       this.doHtmlStep(8, 3), 
  86.       this.doEffectHtmlsStep(8, 3),
  87.     ])
  88.     await delay(500)
  89.     // 14. 感觉灯笼快要成了，再给他加上四根线吧css
  90.     await this.doStyleStep(5)
  91.     await delay(500)
  92.     // 15. 灯笼是不是还有底部的小尾巴呀html
  93.     await Promise.all([ 
  94.       this.doHtmlStep(9, 4), 
  95.       this.doEffectHtmlsStep(9, 4),
  96.     ])
  97.     await delay(500)
  98.     // 16. 灯笼是不是还有底部的小尾巴呀css
  99.     await this.doStyleStep(6)
  100.     await delay(500)
  101.     // 17. 最后当然少不了送给大家的福啦html
  102.     await Promise.all([ 
  103.       this.doHtmlStep(10, 5), 
  104.       this.doEffectHtmlsStep(10, 5),
  105.     ])
  106.     await delay(500)
  107.     // 18. 最后当然少不了送给大家的福啦css
  108.     await this.doStyleStep(7)
  109.     await delay(500)
  110.   },
  111.   methods: {
  112.     // 渲染css
  113.     doStyleStep (step) {
  114.       const cssEditRef = this.$refs.cssEditRef
  116.       return new Promise((resolve) => {
  117.         // 从css配置文件中取出第n步的样式
  118.         const styleStepConfig = styles[ step ]
  120.         if (!styleStepConfig) {
  121.           return
  122.         }
  124.         let previewStylesSource = this.previewStylesSource
  125.         let start = 0
  126.         let timter = setInterval(() => {
  127.           // 挨个累加
  128.           let char = styleStepConfig.substring(start, start + 1)
  130.           previewStylesSource += char
  132.           if (start >= styleStepConfig.length) {
  133.             console.log('css结束')
  134.             clearInterval(timter)
  135.             resolve(start)
  136.           } else {
  137.             this.previewStylesSource = previewStylesSource
  138.             // 左边编辑器展示给用户看的
  139.             this.styleEditPre = Prism.highlight(previewStylesSource, Prism.languages.css)
  140.             // 右边预览区域实际起作用的css
  141.             this.previewStyles = `
  142.               <style>
  143.                 ${previewStylesSource}
  144.               </style>
  145.             `
  146.             start += 1
  147.             // 因为要不断滚动到底部，简单粗暴处理一下
  148.             document.documentElement.scrollTo({
  149.               top: 10000,
  150.               left: 0,
  151.             })
  152.             // 因为要不断滚动到底部，简单粗暴处理一下
  153.             cssEditRef && cssEditRef.scrollTo({
  154.               top: 100000,
  155.               left: 0,
  156.             })
  157.           }
  158.         }, 0)
  159.       })
  160.     },
  161.     // 渲染html
  162.     doEffectHtmlsStep (step, insertStepIndex = -1) {
  163.       // 注意html部分和css部分最大的不同在于后面的步骤是有可能插入到之前的代码中间的，并不是一味地添加到尾部
  164.       // 所以需要先找到标识，然后插入
  165.       const insertStep = insertStepIndex !== -1 ? `<!-- htmlStep${insertStepIndex} -->` : -1
  166.       return new Promise((resolve) => {
  167.         const htmlStepConfig = htmls[ step ]
  168.         let previewHtmls = this.previewHtmls
  169.         const index = previewHtmls.indexOf(insertStep)
  170.         const stepInHtmls = index !== -1
  172.         let frontHtml = stepInHtmls ? previewHtmls.slice(0, index + insertStep.length) : previewHtmls
  173.         let endHtml = stepInHtmls ? previewHtmls.slice(index + insertStep.length) : ''
  175.         let start = 0
  176.         let chars = ''
  177.         let timter = setInterval(() => {
  178.           let char = htmlStepConfig.substring(start, start + 1)
  179.           // 累加字段
  180.           chars += char
  182.           previewHtmls = frontHtml + chars + endHtml
  184.           if (start >= htmlStepConfig.length) {
  185.             console.log('html结束')
  186.             clearInterval(timter)
  187.             resolve(start)
  188.           } else {
  189.             // 赋值html片段
  190.             this.previewHtmls = previewHtmls
  191.             start += 1
  192.           }
  193.         }, 0)
  194.       })
  195.     },
  196.     // 编辑区域html高亮代码
  197.     doHtmlStep (step, insertStepIndex = -1) {
  198.       const htmlEditRef = this.$refs.htmlEditRef
  199.       const htmlEditPreRef = this.$refs.htmlEditPreRef
  200.       // 同上需要找到插入标志
  201.       const insertStep = insertStepIndex !== -1 ? `<!-- htmlStep${insertStepIndex} -->` : -1
  202.       return new Promise((resolve) => {
  203.         const htmlStepConfig = htmls[ step ]
  204.         let htmlEditPreSource = this.htmlEditPreSource
  205.         const index = htmlEditPreSource.indexOf(insertStep)
  206.         const stepInHtmls = index !== -1
  207.         // 按照条件拼接代码
  208.         let frontHtml = stepInHtmls ? htmlEditPreSource.slice(0, index + insertStep.length) : htmlEditPreSource
  209.         let endHtml = stepInHtmls ? htmlEditPreSource.slice(index + insertStep.length) : ''
  211.         let start = 0
  212.         let chars = ''
  213.         let timter = setInterval(() => {
  214.           let char = htmlStepConfig.substring(start, start + 1)
  216.           chars += char
  218.           htmlEditPreSource = frontHtml + chars + endHtml
  220.           if (start >= htmlStepConfig.length) {
  221.             console.log('html结束')
  222.             clearInterval(timter)
  223.             resolve(start)
  224.           } else {
  225.             this.htmlEditPreSource = htmlEditPreSource
  226.             // 代码高亮处理
  227.             this.htmlEditPre = Prism.highlight(htmlEditPreSource, Prism.languages.html)
  228.             start += 1
  230.             if (insertStep !== -1) {
  231.               // 当要插入到中间时，滚动条滚动到中间，方便看代码
  232.               htmlEditRef && htmlEditRef.scrollTo({
  233.                 top: (htmlEditPreRef.offsetHeight - htmlEditRef.offsetHeight) / 2,
  234.                 left: 1000,
  235.               })
  236.             } else {
  237.               // 否则直接滚动到底部
  238.               htmlEditRef && htmlEditRef.scrollTo({
  239.                 top: 100000,
  240.                 left: 0,
  241.               })
  242.             }
  243.           }
  244.         }, 0)
  245.       })
  246.     },
  247.   }
  248. }

结尾

马上就要新年啦！愿大家新年快乐，“码”到成功。

参考

  1. 过年了~我用CSS画了个灯笼，看着真喜庆
  2. 用原生 js 写一个 “多动症” 的简历