如何解决hexo中mathjax公式不换行

## 问题

在`hexo`中写公式一般是用`LaTex`写然后利用`Mathjax`进行翻译来显示，但是当编写多行公式的时候，比如下面的公式的时候

![image-20200723115858343](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics//image-20200723115858343.png)

本来应该渲染出来如下效果

![image-20200723141719914](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics//image-20200723141719914.png)

然而实际渲染出来确实下面这个样子：

![image-20200723115846661](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics//image-20200723115846661.png)

很让人头大，经过多方面排查，最终发现了问题的根源。

## 解决

查看编译过后的html文件发现，其中的`\\`都被转义成了`\`，这样是无法利用`mathjax`进行显示换行的。

![image-20200723142052704](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics//image-20200723142052704.png)

所以我们现在要做的很简单，便是把`\\`转义掉，不让它再被编译即可。

![image-20200723142327914](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics//image-20200723142327914.png)

可以看到已经被成功转义

![image-20200723142423810](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics//image-20200723142423810.png)

现在公式已经会正常显示了

![image-20200723142544542](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics//image-20200723142544542.png)

解决mathjax公式不换行问题

本文是从物联网工程与技术实践期末文档中抽取出来的，可能格式比较奇怪。

## GithubAction

官网的第一段，便讲明了此功能的用途和作用。

> 在 GitHub 操作 的仓库中自动化、自定义和执行软件开发工作流程。 您可以发现、创建和共享操作以执行您喜欢的任何作业（包括 CI/CD），并将操作合并到完全自定义的工作流程中。

看上去云里雾里，其实就是利用yml进行的自定义脚本操作，用于测试/部署的时候的一些列繁琐重复工作实现全流水线自动化作业的功能。

## GithubPage

> 您可以为自己、您的组织或项目设置一个基本 GitHub Pages 站点。

白嫖Github服务器用来部署自己的web应用。部署后链接格式：`<用户名>.github.io/<仓库名>`

## 开始编写

### 生成密钥

```shell
cd ~/.ssh
ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""
```

![图2.13 成功生成密钥](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/image-20200724215856700.png)

此时会生成.pub的公钥与没有后缀的私钥：

![图2.14 成功生成密钥](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/image-20200721154822499.png)

此时再将公钥私钥部署到GitHub：

![image-20200721163516689](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/image-20200721163516689.png)

![图2.15 GitHub部署公钥](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/clip_image002.jpg)

![image-20200721163738918](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/image-20200721163738918.png)

![图2.16 GitHub部署私钥](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/clip_image004.jpg)

### 编写deploy.yml文件

首先先在仓库根目录新建`.github/workflows`文件夹，然后在此文件夹下新建`deploy.yml`文件

然后编写此文件：

```yaml
name: Deployment
on:
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]
    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: Install Packages
      run: npm install
    - name: Build page
      run: npm run build
    - name: Deploy to gh-pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
        publish_dir: ./build
```

此时自动化流程部署已完成，每次commit便会自动部署到GitHub服务器中。

![图2.17 GitHub部署流程](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/clip_image001.png)

![图2.18 自动化部署](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/clip_image003.jpg)

### 添加依赖缓存

上面的流程如果仔细查看的话，会发现一个问题——每一次commit都会进行一次`Install Package`的操作，这样不仅浪费了性能，还极大的浪费了时间，每一次都会浪费平均50s左右的时间进行依赖下载，占用了我们的开发时间，所以我在这里对于`node_modules`做了缓存操作，最终`deploy.yml`文件如下：

```yaml
name: Deployment
on:
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]
    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: Cache node modules
      uses: actions/cache@v1
      with:
        path: node_modules
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.OS }}-build-${{ env.cache-name }}-
          ${{ runner.OS }}-build-
          ${{ runner.OS }}-
    - name: Install Packages
      run: npm install
    - name: Build page
      run: npm run build
    - name: Deploy to gh-pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
        publish_dir: ./build
```

测试一下：

![图2.19 未加缓存](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/image-20200721160457703.png)

![图2.20 添加缓存](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/image-20200721160518125.png)

可以看到下载依赖的时间从42s变为了9s，可以说是质的飞跃了~

### 成果

[部署成果查看](http://2017iotrepo.github.io/IOTBP/)

[Github仓库](https://github.com/xmmmmmovo/IOTBP)

如何利用GitHubAction和GithubPage部署React应用

&nbsp;&nbsp;&nbsp;&nbsp;今天点开了许久未打开的GitHub，还没来得及点进动态查看大佬们star的项目之前，自己便先被一则消息吸引了，本着太长不看的原则，还未仔细查看便条件反射般的点了`Got it`的圆角矩形按钮。之后我的视线便顺着气泡凸起指向的位置寻去，发现了一枚雪花形状新徽章出现在了自己`Profile -> Highlights`上，让那枚`Pro`徽章显得不那么孤单。查看了一下详细信息后，阿这，这不是半年前在油管看到过的**GitHub北极代码库**计划吗？！

![image-20200718231856879](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/image-20200718231856879.png)



&nbsp;&nbsp;&nbsp;&nbsp;当时因为新冠的原因宅在家里实在是太闲了，甚至无聊到了在油管搜索GitHub.......

&nbsp;&nbsp;&nbsp;&nbsp;然后就看到了下面的这个视频👇(Youtube视频，显示可能需要某些手段)

<iframe width="890" height="500" src="https://www.youtube.com/embed/fzI9FNjXQ0o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

&nbsp;&nbsp;&nbsp;&nbsp;大致讲的就是把代码存一份到北极去留作备份，用以后来信息断层的人们考古用，用以最容易理解的符号表示解密方案（怎么越听越像自举），然后根据解密方案查找信息。wow，awesome！竟然这么快就上线了，不愧是微软时代的GitHub，有钱就是效率高啊。

&nbsp;&nbsp;&nbsp;&nbsp;虽然没有被采用，但是我最感兴趣的还是其中提到的存储介质——**磁带**。

&nbsp;&nbsp;&nbsp;&nbsp;说到磁带，应该可以说是很多人的“ 童年 ”了，每天晚上洗脚的时候，每天早晨吃饭的时候，本应该在愉快的动画中度过的时间，被硬生生的安排成英语听力时间，每天听着机械一般的无感情的单词朗读和强挤出来的好似使出了自己毕生实力的浮夸演技对话仅是为了那用于糊弄老师的好似无上的圣旨一般的家长签字。有过类似经历的hxd们估计已经时会心一笑了，然而随着时代发展，磁带这一承载着童年回忆的物件如今却基本上在生活消费市场上销声匿迹了，现代课本也已经基本上全面使用光盘作为附载信息的存储介质了。然而，磁带作为一种经历了半个多世纪的存储介质，却从未消亡，沦为收藏家的玩物，反而在更加高精尖的研究机构/企业存储中继续发光发热。

&nbsp;&nbsp;&nbsp;&nbsp;上面的言论并非胡思乱想的民科行为，而是实打实的存在有公开数据的：

![image-20200719125239292](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/image-20200719125239292.png)

[**中国科学院遥感与数字地球研究所LTO磁带采购公告👆**](http://www.radi.cas.cn/gdxx/tzgg/201805/t20180521_5013864.html)

![image-20200719125412481](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/image-20200719125412481.png)

[**基因组研究所海量磁带库备份系统正式投入运行👆**](http://big.ac.cn/xwzx/kyjz/201501/t20150128_4306330.html)

&nbsp;&nbsp;&nbsp;&nbsp;可以看到，甚至在中国科学院内部，磁带依旧是很重要的存储介质，不仅在国内，国外各大研究机构也是磁带的“大客户”：

[**国际评价中子核数据库**](https://www.osti.gov/etdeweb/servlets/purl/20315863)中便多次提到磁带，并且明确提出离线检索中包含磁带数据，可以说，磁带只不过换了一种新的方式存在，并且发展的更加茁壮。

&nbsp;&nbsp;&nbsp;&nbsp;讲到这里，肯定很多人都会有着大大的疑惑——为什么这些研究机构不使用更加“现代”的存储工具呢？咱们接着往下看。

&nbsp;&nbsp;&nbsp;&nbsp;猛然提到研究机构有点让人不知所措，不如我们先从一些旧照片中找寻一下线索：

![img](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/1960s-woman-data-entry-computer-b-5000-vintage-images.jpg)

![ibm 1960s | Ibm, Old computers](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/56ff99412e0fa0da59ac26059574bc1c.jpg)

![This room-sized IBM computer from the 1960s was awesome in it\'s](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/d7d48f381d510e9d588ea96121280934.jpg)

&nbsp;&nbsp;&nbsp;&nbsp;上面一组照片拍摄于上世纪60年代，可以看到当时的磁带存放并用于大型机房，由专业的操作员进行专业的操作的，没错，1952年，IBM成功发布了计算机业内的第一款磁带机，拉开了磁带发展第一时期的序幕。这一时期延续了35年，主要特征是圆轴磁带的使用，并且需要人工手动操作(装载、卸载和归档)。如果说当时使用磁带是没有选择，那么为什么现代科研机构也还是继续使用磁带呢？

&nbsp;&nbsp;&nbsp;&nbsp;别急，接着往下讲，时间跨越到千禧年往后的2002年，此时磁带跨越了第二个时代——近现时代，此时磁带已经不需要那种大型磁带驱动器，不专用于主机，这让便携和低成本产品得以于平民消费市场面世，自然，廉价的存储介质和便于携带的特性很快便掀起了一股风潮......同年，磁带的容量首次超过了最大磁盘的容量，过去，一个磁盘所能容纳的信息量往往需要多盒磁带才能装得下；但是现在情况完全反过来，一盒磁带就可以容纳多个磁盘的数据。磁盘的失败从此便可见一斑。

![随身携带的磁带播放器](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/49-131215-9-4.jpg)

&nbsp;&nbsp;&nbsp;&nbsp;后面的事情大家也都经历了，计算机硬盘/软盘的出现，改变了家用电脑的存储境况，单位体积的容量大大提升，全面改善了用户体验，这使得家用电脑短暂的磁带存储介质的时代极其短暂。

![苹果Ⅱ 使用磁带作为存储媒介](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/v2-afaea03afc6c7d936cf24933f9081a87_r.jpg)

![苹果Ⅱ 使用磁带作为存储媒介](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/v2-a05960f41b5058867fc363c6b737c993_r.jpg)

![雅达利5200](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/v2-b8f4941449f99d7e6cff36972e5eabd2_r.jpg)

&nbsp;&nbsp;&nbsp;&nbsp;从这里，其实就可以看出民用设备与科研设备选用上的些许差距了，民用设备主要讲究的就是成本和便利，而科研设备主要考虑的则是稳定性和持久性。好了说了这么多，大概历史也说明了，磁带作为一种历史悠久的存储介质，甚至一直到2002年还在发展，但是其单位体积的存储容量使得其无法在民用大放异彩。总结一下，磁带价格低廉，发展没有落后，但是单位体积存储容量小。

&nbsp;&nbsp;&nbsp;&nbsp;相信已经有人分析出来结果了，在这里我引用一下**CERN**数据存储主管**Alberto Pace**的分析来说明优点

> &nbsp;&nbsp;&nbsp;&nbsp;相比硬盘，磁带储存拥有4大优势：虽然，磁带的装卸是落后的，即使在自动化装置协助下，在储存库中找出对应的磁带并装入读取装置中最快也需要40秒。但是一旦就绪后，磁带的读取速度却可以达到硬盘的4倍。 
> 
> &nbsp;&nbsp;&nbsp;&nbsp;其次是可靠性。磁带也会遇到损毁的情况，如断裂。但断裂后的磁带仍可以重新接上，而且仅会造成数百MB的损失——这对于动辄上TB的专业储存设备来说，实在小事一桩。但对硬盘来说，物理损坏甚至会导致全部数据丢失。CERN的实际数据是，他们每年储存在磁带上的100PB数据（1PB相当于1000TB），每年会损失数百MB；相对的，储存在硬盘上的50PB 数据，这个数字则达数百TB。
> 
> &nbsp;&nbsp;&nbsp;&nbsp;还有就是，对于磁带来说，突然断电也不会损坏记录下来的资料，但对于硬盘来说，这是一件危险的事情。
> ​&nbsp;&nbsp;&nbsp;&nbsp;最后也是最重要的，是磁盘一定程度上更加安全。比如说如果一间公司的数据中心被黑客劫持，他可以在数分钟内让硬盘上50PB数据从此在世上消失，但如果磁带的话，不好意思，可能需要数年。
> 
> &nbsp;&nbsp;&nbsp;&nbsp;不过，磁带储存并非只与那些每秒就碰撞出几个GB的核子对撞实验室有密切联系。调查表明，磁带储存也同样适合中小型企业。
> 
> &nbsp;&nbsp;&nbsp;&nbsp;首先，磁带储存更便宜也更持久。数据在磁带上往往能存放超过30年；硬盘超过5年的话，如果你是公司的IT主管，你就需要考虑将数据转移了。而且磁带目前仍然是储存成本最低的解决方案，目前大概每GB数据在磁带上的成本为4美分，硬盘的话则为10美分。如果考虑到前面所说的寿命问题，差距将会更大。所以，磁带在展示还并没有出现真正消亡的迹象，我们也看到了这个老一代的产品所寻求的生存潜力。

&nbsp;&nbsp;&nbsp;&nbsp;好了，讲完了一个传奇的历史，其实最让我惊奇的是一个已经淡出生活的物件竟然在另外一个领域还有这不俗的影响，磁带就如同软件语言的`C++`一样，“老” ，乃于它的历史。而技术却一直在改良。磁带和其他大部分储存媒介一样，磁带的储存密度也一直在攀升（遵循摩尔定律）。其实这种想当然的事情并不少见，比如常年混迹手机圈子的人，总会说一句：

> 索尼要凉

&nbsp;&nbsp;&nbsp;&nbsp;但其实呢，索尼靠着全世界的音乐版权，hi-res，PS系列，相机，电视······如此之多的产业早就让索尼赚的盆满钵满，说不准手机产业就是拿来试水的，到时候，公开宣布退出的时候，大抵又会有人说道：

> 索尼果然凉了

&nbsp;&nbsp;&nbsp;&nbsp;当然，这其实很正常，因为人类就是这样的生物，在**丹尼尔 · 卡尼曼**所著的**《思考，快与慢》**第五章中便描述了这种现象，下面我提出一个问题，再做出分析：

> 现在我公司有大量的重要数据集静态资源需要长时间稳定使用，仅是用于读取，请问我选取存储介质的时候是选用SSD还是HDD呢？

请作答。

。

。

。

&nbsp;&nbsp;&nbsp;&nbsp;hummmmm，相信有人很快选了HDD了，因为长时间稳定存储还是大量的存储，听说过SSD损耗的估计都早早排除了SSD这个选项了。事实上呢，这里应该选用SSD，因为仅是用于读取，而SSD的读取是不会有损耗的，仅是写入会有损耗（这里可以去看一下SSD原理就明白了），所以这里建议选取快速的SSD更佳。

&nbsp;&nbsp;&nbsp;&nbsp;当然，你可能会说：“这SSD读取不损耗我也不知道啊”，那你为什么不去百度呢？其实这里是你的“系统1”——经验系统在作怪，你想当然的把你已知的信息带入了当前环境中来，导致你不能存在客观的逻辑判断。

&nbsp;&nbsp;&nbsp;&nbsp;下面是原书中的形容：

![a](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/image-20200719194910451.png)

![b](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/image-20200719194943595.png)

&nbsp;&nbsp;&nbsp;&nbsp;几乎可以说，我们大多数时间都不能离开这个系统，它能帮助我们做出大量的简单的判断，比如闹铃响了需要关闹铃，手机没电了需要充电，这些都是由你的“系统1”来做出判断，但当你被这个系统牵着鼻子走，很少觉得自己会有“系统2”判断的时候，便是你需要警觉的时候，因为，我们独立思考的人格，才是我们作为一个活在这个多面的世界中的最好体现。

&nbsp;&nbsp;&nbsp;&nbsp;这便是小弟的一点点延展思考，仅代表自己的观点，欢迎反驳，但是不喜勿喷，和平讨论。

谜之github徽章以及存储介质感悟

起因是因为今天看到b站上有自媒体评测 `MIUI12` , 说到了动画流畅度那方面弹幕都说线性动画非线性动画什么的, 其实很早之前 `MIUI` 就是全线采用非线性动画了, 但这个线性与非线性又是什么, 有什么区别呢, 我今天就稍微来讲一下.
其实这个高中就学习过了, 不过因为最近学习了js, 可以更加明确的展示出来了.

## 什么是线性动画/非线性动画

要理解这个, 首先需要理解一个问题: **什么是动画? ** 

### 什么是动画?

根据 **维基百科** 所叙述的: 

> **动画**是指由许多[帧](https://zh.wikipedia.org/wiki/%E5%B8%A7)静止的画面，以一定的速度（如每秒16张）连续播放时，肉眼因[视觉残象](https://zh.wikipedia.org/wiki/%E8%A7%86%E8%A7%89%E6%AE%8B%E8%B1%A1)产生[错觉](https://zh.wikipedia.org/wiki/%E9%8C%AF%E8%A6%BA)，而误以为画面活动的作品。

可以了解到, 动画, 其实就是很多静止的画面利用视觉残留现象做出来的可动的效果, 所以说如果想要模仿动画的效果, 只需要在1s内对一张图片更替一定的量的次数, 人眼就不会看出是否对这张图片进行了更替, 这, 其实就是 **帧** .
同时,并不是所有的 **帧** 都是会更改的, 有些帧完全就是不会变化的, 这就引出了 **关键帧** 的概念, 我们只需要着重关注于关键更改了图象的 **帧** 即可, 并不需要关注其他状态的 **静止帧** .
本次编程实践也是只针对于关键帧处理的.

### 什么是非线性动画

在 `Maya` 用户指南上有这么一句话:

> _在 Maya 中，有两种类型的片段：源片段和常规剪辑。Maya 通过将角色的原始动画曲线保存在源片段中，来保留及保存角色原始动画曲线_。请勿使用源片段_为角色设置动画。但是，您可以使用源片段（称为_常规片段_）的副本或_实例_以非线性方式为角色设置动画。请参见[动画片段](https://knowledge.autodesk.com/zh-hans/support/maya/learn-explore/caas/CloudHelp/cloudhelp/2015/CHS/Maya/files/GUID-D462A79C-A766-43DD-BB43-5BCDAEC5D8BD-htm.html#GUID-D462A79C-A766-43DD-BB43-5BCDAEC5D8BD__WS17956D7ADBC6E736B6BA507117AE308213-7FF6)。___
> 
> __非线性动画的基础是，移动、操纵和混合常规片段，从而为角色生成一系列平滑的动作_。
> __> 

看上去很高级, 说白了其实就是动画的关键帧停留位置(时段), 也就是说, 非线性的关键帧所停留的并不是处于常见规律中的, 他可能是遵循二次函数, 遵循震荡函数, 总之, 其规律一定不是线性规律(一次函数).

### 什么是线性动画

所以, 线性动画就很容易理解了, 所有关键帧停留位置其实都是处在一条线中的, 其导数永远是常数.

## 线性动画/非线性动画有什么用

那么, 非线性动画又有着什么样的特殊用途呢?
很简单的, 应用在手机上, 这会让你的动画感觉更有动感, 更加精致, 不会像是线性动画那样, 一板一眼. 
比如 `IOS` 一直都是非线性动画, 给人的感受就非常的丝滑.
而早年间的 `Android` 动画都是线性动画, 给人的感觉就像是机械一般的精密但刻板. 

## 简单的线性动画(点击图片看动画):

![img](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/1588320557603-83ac95ee-be22-4c90-8b6d-67819c6439bc.png)

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="xmmmmmovo" data-slug-hash="ExVwZpd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="线性动画">
  <span>See the Pen <a href="https://codepen.io/xmmmmmovo/pen/ExVwZpd">
  线性动画</a> by  !输认不永DGL (<a href="https://codepen.io/xmmmmmovo">@xmmmmmovo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 

## 简单的非线性(点击图片看动画):

### 圆弧非线性

![img](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/1588320756761-3d5a0233-e333-4fdb-a2a2-38aabfc5d443.png)

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="xmmmmmovo" data-slug-hash="gOaGmpg" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="加速非线性">
  <span>See the Pen <a href="https://codepen.io/xmmmmmovo/pen/gOaGmpg">
  加速非线性</a> by  !输认不永DGL (<a href="https://codepen.io/xmmmmmovo">@xmmmmmovo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 加减速非线性

先加速再减速, 二次函数

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="xmmmmmovo" data-slug-hash="eYpGvYP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="二次非线性">
  <span>See the Pen <a href="https://codepen.io/xmmmmmovo/pen/eYpGvYP">
  二次非线性</a> by  !输认不永DGL (<a href="https://codepen.io/xmmmmmovo">@xmmmmmovo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 碰撞反弹

![img](https://cdn.jsdelivr.net/gh/xmmmmmovo/ResourcesBackup/blog/pics/1588320853246-0a0dc7da-a845-4b4d-9280-6ada3d2c2370.png)
如果在开始时有动画效果，比如弹跳 —— 那么它将在最后显示。
上图中常规弹跳为红色，easeOut 弹跳为蓝色。

- 常规弹跳 —— 物体在底部弹跳，然后突然跳到顶部。
- `easeOut` 变换之后 —— 物体跳到顶部之后，在那里弹跳。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="xmmmmmovo" data-slug-hash="RwWZdeW" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="碰撞非线性">
  <span>See the Pen <a href="https://codepen.io/xmmmmmovo/pen/RwWZdeW">
  碰撞非线性</a> by  !输认不永DGL (<a href="https://codepen.io/xmmmmmovo">@xmmmmmovo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 总结

如果理论看不懂, 那大概看例子也能领会了, 有些东西,  不知道是不是我语文太差的缘故, 理论实在是难以形容, 但是当实际例子展示出来了之后, 就会发现, 其实这个还是很容易理解/看出来的嘛.

线性动画/非线性动画

一点点docker笔记

## 安装docker

```shell
curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-'EOF'
{
    "registry-mirrors": [
      "https://hub-mirror.c.163.com",
      "https://mirror.baidubce.com",
      "https://dockerhub.azk8s.cn"
    ],
  "insecure-registries" : [
    "hub-mirror.c.163.com",
    "mirror.baidubce.com",
    "dockerhub.azk8s.cn"
  ]
}
EOF
sudo systemctl daemon-reload
sudo systemctl restart docker
```

## 安装docker-compose

```shell
sudo curl -L https://github.com/docker/compose/releases/download/1.24.1/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
```

## 利用Dockerfile定制镜像

```dockerfile
# flask部署
FROM python:3.7

COPY . /code
WORKDIR /code

RUN  ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && pip install -r /code/requirements.txt
# 如果太慢了再加上这句 不然镜像站有可能同步不全导致包安装失败
# -i https://pypi.tuna.tsinghua.edu.cn/

CMD gunicorn app:app -c gunicorn.conf.py --error-logfile /log/gunicorn.log
```

```shell
docker build -t 'name' .
docker run -it 'name'
docker run -d 'name'
```

| COPY    | 复制文件   |
| ------- | ------ |
| CMD     | 容器启动命令 |
| ENV     | 设置环境变量 |
| WORKDIR | 指定工作目录 |

## 常用指令

- docker image/container ls **列出所有镜像/容器** 
- docker rm ... **删除镜像** 
- docker attach ... 进入容器
- docker ps -a **列出所有的container包括没有运行的** 

## docker-compose

```dockerfile
# flask redis nginx mysql部署
version: '3.6'

services:
  web:
    build: .
    container_name: web
    volumes:
      - ../logs:/log
    depends_on:
      - db
      - redis
  db:
    image: mysql:5.7
    environment:
      - MYSQL_ROOT_PASSWORD=mx/58MFuLJ6^%.q
    volumes:
      - ./config/mysql:/docker-entrypoint-initdb.d
  nginx:
    image: nginx:1.17
    volumes:
      - ./config/nginx/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - web
    ports:
      - 8888:80
  redis:
    image: redis:5.0.8
    volumes:
    - ./config/redis/redis.conf:/etc/redis/redis.conf
    command: redis-server
    privileged: true
```

- build **利用Dockerfile编译的目录**
- image **镜像** 
- volumes **目录映射关系** 
- depend_on **依赖于 当依赖启动后本service才能启动** 
- port **开放的端口映射** 
- environment **环境变量** 
- privileged **权限** 
- command **自带命令行** 

## 常用指令

- docker-compose start
- docker-compose stop
- docker-compose top

## 奇技淫巧

### 列出所有的容器 ID

```shell
docker ps -aq
```

### 停止所有的容器

```shell
docker stop $(docker ps -aq)
```

### 删除所有的容器

```shell
docker rm $(docker ps -aq)
```

### 删除所有的镜像

```shell
docker rmi $(docker images -q)
```

### docker1.3之后的资源清理

```shell
docker image prune --force --all # 删除所有不使用的镜像
docker container prune -f # 删除所有停止的容器
```