天黑了、让我为你关窗帘吧！

今天遇到朋友发来的一个需求，需要做一个窗户上下拉窗帘的小小的交互，于是就有了今天的小DEMO，要实现下图一个效果，需要开窗帘，关窗帘，中途还可以暂停，就这样一个小小的效果，我们来分析一下思路开始实现吧。

window.gif

分析思路

看看上图设计非常简单，一个窗口，一个窗帘，窗户不动，窗帘需要被控制移动，那我知道这个需求的第一时间，我们的脑子里就有了基础布局了，很简单的布局，绘制一个div 将窗帘设为div的背景图，再将窗帘设置为绝对定位，此时布局已经完成。

<div class="window">
     <img :src='src' class="curtains" :style="{ top: `${top}px`}"" />
</div>

.window{
  width: 400px;
  height: 400px;
  background-image: url(https://file.jiangly.com/images/36762512.png);
  background-size: 400px 400px;
  position: relative;
  overflow: hidden;
}

.curtains{
  position: absolute;
  width: 300px;
  height: 410px;
  top: -410px;
  left: 55px;
}

通过简单布局，此时窗帘已经被我们隐藏到窗户上面了，我们只需要对窗帘的top值就行改变，就可以打开关闭窗帘了，所以我们为其绑定一个Top。

接下来，就是如何控制他了，我们加上三个按钮，分别是开始，暂停，结束，此时我们分别对其绑定上，三个事件，当我们点击开始的时候，窗帘下降，意味着top值会变大，所以，我们在点击开始的时候，设置一个定时器对top值累加即可：

function open(){
    this.timer =  setInterval( () =>{
        this.top += 10
    }, 50)
}

同理，当我们关闭的时候，就需要对其累减了

function open(){
    this.timer =  setInterval( () =>{
        this.top -= 10
    }, 50)
}

似乎看起来没有问题，但是如果我们点击开启，就会一直往下，所以我们需要一个边界判断，例如我们开启的时候，当top值达到了最大的top值的时候，我们就需要关闭定时器

function open(){
    this.timer =  setInterval( () =>{
        this.top += 10
        if(this.top > maxHeight) clearInterval(this.timer) 
    }, 50)
}

反之，当我们关闭的时候，当top大于-maxHeight的时候，我们同样关闭定时器，同样点击暂停按钮就单纯之间关闭定时器即可，看似没有问题了，现在这种场景已经可以正式运行了。

但是测试会发现，重复点击开始会越来越快，很明显，我们没有对开启事件做限制，重复点击会一直加载新的定时器，所以在点击开启的时候我们还需要对其进行判断，窗帘是否在移动中，如果是第二次点击则不生效。

所以此时我们需要加入一个新的变量，窗帘的状态status，当首次点击开始或者关闭按钮的时候，初次启动定时器就需要赋予其状态为movein，移动中，只有当达到边界或者手动点击暂停的时候，我们在关闭定时器的同时，再改变其状态为完成。

然后在每次点击开启或者关闭的时候判断窗帘是否在移动中，如果是，则阻止此次点击。

好了，一个开关窗户的效果就做好了，这就是一个需求的思路分析和解决步骤，在下面体验一下吧！

在线体验

码上掘金体验地址