The draw component design

A Project Background

Internal company information and a little red line only discuss security not disclose technical details related to the interaction and design

Two interactive and visual

Overall Vision:

slightly

Draw Module: a flower petals is about to draw the background, when the rotation of the petals of different lights, visual omitted issued only discuss technical implementation details

Interaction: slightly

Analysis of Three issues need to be addressed

As a not done something, that we should complete the analysis under the effect of this issue to be considered, analyzed and then broken down, then gradual implementation, summary analysis of the problem encountered, whether there is not taken into account.

In fact, this lottery module is very common in today's active page, especially in the active page.

First of all, finishing the TODO List

To be written in the form of components, easy to reuse, consider the transmission parameters required components and the like.
Is in the form of back-end interface, that is, when the user clicks on the draw, winning has received information about the lottery need to perform front-end rotation animation, click on the ban need to repeat the animation time, rate of rotation, rotation period, the initial pointer You need to control the position of the distal end.
State management, for different lottery number, to distinguish whether the landing, whether processed in the corresponding state in the APP, etc., pop or jump corresponding URL
Buried distal and associated related data reporting.
Style questions, interactive design ideas is actually a squared lottery, but the visual style is biased roulette lottery pointer class, in accordance with the logic level is tentative idea of the direction pad to achieve, but the style aspects need to adjust
The results also draw a pop assembly takes on the form, and the need to define the parameters passed
Abnormal display, the interface when the call fails, lack of back-end database inventory and so requires a corresponding warning pop components

Roughly interaction process is as follows

Four specific design

4.1 into a common package assembly, the main assembly is transmitted parameters are defined, the first draw component needs to call home, there are three parameters must pass

showLuckDraw // whether to show the draw module, if the user has drawn flattering, default is not to show this module, lottery results directly show

userStatus // User Status: Home interface returns this information, you need to pass to the component

drawStatus // Draw status:

Subassembly is also a need to draw assembly - assembly lottery result transmission parameters

showSpecial&&type

        The props: { 
            // draw whether display module, if the user has drawn winning, not the default display module, a direct lottery result display 
            showLuckDraw: { 
                type: Boolean 
            }, 
            // user status 
            userStatus: { 
                type: Number The, 
                required: to true 
            }, 
            // draw status 0: Jump Events page 1: the need to increase the number of sweepstakes through activity 3: Do not draw 
            drawStatus: { 
                of the type: number The, 
                required: to true 
            }, 
            // if not already landed landed landing lifting components 
            hasLogin: { 
                of the type: boolean, 
                required: to true 
            },  
            // pop show special lottery results
            showSpecial: { 
                type: Boolean, 
                default: to false 
            }, 
            the value // pop transmitted to a lottery result lottery result display corresponding 
            type: { 
                type: Number The, 
                required: to true, 
            } 
        },

4.2 Draw Animation (core logic)

The core idea is that when clicking lottery when calling back-end interface, and set the initial parameters of the turntable is required, including the following

diff cumulative variable speed control gradually speed up / slow down gradually
star Start button click state, if the user has been unable to draw directly disabled
The initial rate of speed lottery
isDisable whether to disable the start button lottery, lottery prevent duplication, in order to ensure that lottery lottery again after the end of the movie, to avoid repeated calls to the backend interface
drawStatus initial value setting state lottery
startTime rotation recording start time, to control the animation length

At the same time, setting a timer, sequentially switched wheel background image animation effect achieved by periodic intervals milliseconds's speed control, when the rotation reaches a preset time, deceleration started, and if the rear end of the return id prizes and prize when the front end corresponding to the id can clear the timer, while the return function aborted and re-state value setting dial, to complete the lottery animation.

Simple jade use html part, though beginning to use some suited, but are used to after, the feeling is very simple and clean, no need to look at a large section of html code in calss etc.

<template lang="jade">
    .award-box(v-if="showLuckDraw")
        .award-bg
            .award(:class="'active' + (current)")
        button.start-btn(
            @click="start",
            :disabled="isDisable",
            :class="star ? 'star': '' "
            )
        .award-num 当前抽奖次数  
            i.award-n {{ currentNum = +this.drawStatus === 2 ? 1 : 0 }}   
            i 次
        special-dialog(:show-special="showSpecial", :type="id")
</template>

        
        move() {
                let timeout = setTimeout( () => {
                    this.current++; // 切换背景图，初始值可以随意设置
                    if ( this.current > 4) { // 因为只有5个奖品，所以当current 从0开始大于4的时候，重新加载第一张图片
                        this.current = 0;
                    }
                    // 若抽中的奖品id存在，且转动时间大于2秒，则开始减速转动
                    if ( this.award.id && ( Date.now() - this.startTime ) / 1000 > 2 ) {
                        this.speed += this.diff; // 转动减速
                        //若转动超过4秒，并且奖品id等于格子的奖品id，则停下来
                        // this.awards 是从后端获取的中奖结果，如果和前端对应的奖品id对应上的话则为中奖
                        if ( ( Date.now() - this.startTime ) / 1000 > 4 && this.award.id == this.awards[this.current].id ) {
                            clearTimeout( timeout );
                            this.star        = false;
                            this.isDisable   = false;
                            this.showSpecial = true;    // 调用抽奖结果组件
                            this.type        = this.id; // 将中奖结果赋值给type，显示对应的抽奖结果组件
                            setTimeout( () => {
                                console.log(this.award.id);
                            },0);
                            return; // 抽中奖后停止定时器
                        }
                    //若抽中的奖品不存在，则加速转动    
                    } else { 
                        // todo:如果后端接口200且返回的中奖结果是错的，这里可以处理下异常
                        this.speed -= this.diff;
                    }
                    this.move();
                }, this.speed );
            },

4.3 状态管理，在调用move() 抽奖动画的之前，就对相应的用户状态做处理，未登陆的吊起登陆，没有次数的去获取次数，不可抽奖调用弹窗等等

4.4 埋点这里在工具函数里封装了一个公共的函数，直接调用传参记录埋点信息，关于埋点的话有空再展开

4.5 样式方面，遇到了一些问题

最开始的想法是只改变花瓣的背景图,但是最后发现，图片是不规则的，是有角度的，难以定位准确。而且定位位置的计算在不同机型上有差异，所以采用整体图片的替换
整体图片的替换又遇到一个闪烁问题：
成因：因为当图片花瓣旋转时视觉上只是每个花瓣的变化，实际上是整张图片的变化，通过动态的切换calss来完成背景图片的替换。正因为这样，新的问题就产生了，当代码构建部署打包发不到线上时，静态资源一般会有单独的服务器，也就是说图片的资源请求会有一定延迟，这就导致了第一次加载点击抽奖的时候，页面花瓣转动会有闪烁，而第二次图片会走缓存，所以这个问题只出现一次，但是却是致命的
解决方法：把url改为base64的Data URL，实际上就是利用base64编码把图片数据翻译成标准ASCII字符，Data URL是在本地直接绘制图片，不是从服务器加载，所以节省了HTTP连接，起到加速网页的作用，但是弊端就是IE8以下浏览器不支持这种方法（当然app内肯定是支持的，绝大部分手机也是支持的）。用这种方法会加重客户端的CPU和内存负担，总之有利有弊，而且不适合大图片，针对这个图片找UI替换了体积更小的图片，以减轻客户端的内存负担。

4.6 针对中奖结果的弹窗，封装另一个组件，只需要传递type的参数就显示不同的中奖结果，类似的还有挂在到全局的弹窗组件，异常的时候及时抛出错误弹窗

五总结和反思

虽然说现在活动页比较多且交互复杂，但是可以尽可能的封装一些公共的组件，提供基本的骨架，只需要修改一些css就能快速完成一个功能。

还有对于没有做过的东西要具体分析，拆解成步骤，一步一步的完成，同时预留好一定的buffer时间，最重要的，经常总结与反思，查找自身的不足，在繁忙的工作中提升自己。