2020年4月9日20:50:10——Sam书城的两大难点

一、随机图书接口实现

1、Sam老师的方式：

按下随机按钮后，调用randomBook接口，异步返回随机图书数据（随机多个），取第一个。
后端random接口如下：

2、个人简化方式，伪代码

二、翻转卡片过程难点

分析动画运动过程：
总共3个阶段：
1、卡片初始进入动画，先放大后缩小再还原。

2、圆形烟花 + 卡片翻转（每25ms重渲）

3、书籍放大后进入。


第1,3阶段 是css animation 以及 vue transition组件 完成，较简单。
而第2阶段，卡片和烟花，是由runFlapCardAnimation + runPointAnimation 共同控制的。
核心就是将动画颗粒化拆分。
每个小阶段，通过固定间隔去进行动画绘制，和requestAnimationFrame类似。

每25毫秒（data内可自定义），调用一次动画逻辑，逻辑将会判断以及改变卡片翻转角度，色值，以及z-index值（可能被覆盖，也可能被置顶）。

上述逻辑包含了，对卡片的颗粒化控制， 每次调用色值增加或减小5，rotate角度的增减。
由当前实际翻转角度去判断，去不断重绘动画。
当旋转角度为180，即进入下一组卡片的动画渲染。（动画是无限循环的，直到书籍接口返回数据才会停止）