历史回顾：
- 【vue系列】 TypeScript 初体验
- 【vue系列】图片裁剪插件 vue-cropper，源码解读
- 【vue系列】从发布订阅模式解读，到vue响应式原理实现（包含vue3.0）
- 【vue系列】用 vue优雅地 生成动态表单（一）
- 【vue系列】优雅地用 vue 生成动态表单（二）
- 【vue系列】你不知道的 vue-devtools
- 【vue系列】vue-router源码分析
- 【vue系列】深入理解 vuex
- 【vue系列】vue 和 echats 结合的春天，vue插件vechart
- 【vue系列】vue2.x 项目配置 ESLint
- 【vue系列】vue2.x 项目配置 Mocha 单元测试
- 【vue系列】两张图，搞清楚 diff 算法，真香啊！
- 【vue系列】当 element-ui 按需引入遇到 vue-router 路由懒加载
- 【vue系列】封装公共弹窗组件的正确方式
- 【vue系列】开发组件、封装成vue插件、编写文档、配置gh-pages分支demo、发布npm包一波流
背景
最近有个需求-活动抽奖，比较别扭的是奖品不是9个，12个，而是7个。正面展示所有奖品，其中一个奖品，第9次抽必得，其它的正常抽奖。这个需求本身不难，主要是这是第一次做抽奖，有些未知感。项目上线了，赶紧记录下，方便日后查看。
抽奖实现
第一步：7个奖品的布局
设计要求，第一排展示4个奖品，第二排展示3个奖品，如果给这七个奖品排序从0开始，如下： 0 1 2 3 4 5 6
第二步：抽奖动起来
但是抽奖效果，是顺时针的转动 0，1，2，3，6，5，4。如何保证抽奖的转动顺序呢，🤔？ 嗯，这是个好问题。
先通过一个数组用来规定转动顺序 arrNum = [0, 1, 2, 3, 6, 5, 4]，初始化转动指针 prizeIndex 默认从0开始。如果定义 prizes 为奖品数组，通过 setInterval 定时切换指针，来展现抽奖动效。需要注意的是当指针位于3时，下个指针需要指到6上，可以通过
prizes[arrNum[prizeIndex]]来保证抽奖的转动顺序。
动效采用 transition，
.prize-item {
// …
transition: 0.3s;
transform: scale(1);
&::before {
// …
transition: 0.5s;
opacity: 0;
}
}
.chose {
position: relative;
&::before {
transition: 0.1s;
opacity: 1;
}
.prize-item {
transform: scale(1.5);
}
}
第三步：抽中奖品
抽奖可以动起来了，指针如何指到中奖奖品上，突出中奖结果，并终止动画呢？
在抽奖动画开始前，我们先拿到抽奖结果，通过抽奖结果，我可以计算出中奖奖品的元素序列号。当抽奖移动函数，指针和中奖序列号一致时，就 clearInterval，展示抽奖结果。
第四步：抽奖动效优化（由快到慢）
产品不希望抽奖动效是匀速的，希望可以由快到慢，有个扫尾效果。🤔 将动效分为两部分来处理，先快速转，再慢速转。比较简单的解决方案。快速转固定圈数，最后一圈慢速转到中奖奖品上。
小节
本篇没有贴大量代码，主要记录编写活动抽奖的代码思路。提炼了一个DEMO，大家可以参考。
