摘要：組件介紹組件的內(nèi)部運(yùn)動是動畫，使用的是開源動畫庫的出現(xiàn)是為了解決小程序開發(fā)時的復(fù)雜運(yùn)動會話框。但是我們在結(jié)構(gòu)中用語句來控制組件的顯示與隱藏的。因?yàn)樵摻M件的使命是提供多種運(yùn)動方式，所以不會定義用于裝載內(nèi)容盒子的樣式。

vi-motion組件的內(nèi)部運(yùn)動是css3動畫，使用的是animate開源動畫庫 
vi-motion的出現(xiàn)是為了解決小程序開發(fā)時的復(fù)雜運(yùn)動會話框。讓開發(fā)不必把精力放在復(fù)雜的動畫運(yùn)動上，使其更加關(guān)注業(yè)務(wù)邏輯
組件文檔：vi-motion
github倉庫：VisionUI, 歡迎 start 或 issues

復(fù)雜的運(yùn)動會話彈窗

多適用于授權(quán)彈窗、兒童類小程序項(xiàng)目、抽獎類小程序項(xiàng)目等

只定制運(yùn)動動畫，不提供任何UI界面

在上一步我們清楚的知道了組件的使用場景以及一些需要對外提供的接口 
那么DOM結(jié)構(gòu)(wxml)應(yīng)該怎么設(shè)計(jì)呢？

既然這是一個運(yùn)動類的會話彈窗，那么DOM結(jié)構(gòu)與普通的會話彈窗是差不多的。一個根元素下面包含兩個子元素。其中一個子元素為彈窗的mask遮罩層，一個元素是用來裝載與用戶的對話內(nèi)容。

但是，該組件只是提供彈窗的運(yùn)動方式，而不會提供彈窗的基本交互UI。所以，需要定義一個 slot 插槽用來接收開發(fā)者提供的對話UI界面

組件的內(nèi)部DOM結(jié)構(gòu)(wxml)

isShow 是用來控制組件的顯示與隱藏 
maskIsHide 用來控制遮罩層的顯示與隱藏 

maskColor 用來定義遮罩層的顏色 

enterAnimateName 用來控制組件出現(xiàn)時候的動畫 

outAnimateName 用來控制組件隱藏時候的動畫 

animationDuration 用來控制動畫運(yùn)動的時間 

基本的DOM結(jié)構(gòu)出來之后，下面是給這些DOM結(jié)構(gòu)編寫style

我們會在樣式文件(wxss)中引入animate開源動畫庫

@charset "UTF-8";
@import "./animate.min.wxss";
.vi-dialog {
  top: 0;
  left: 0;
  position: fixed;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  z-index: 10000;
}

.vi-motion__animated {
  transition-property: transform;
  transition-delay: 0.5s;
}

.vi-dialog-mask {
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 9999;
}

在組件的DOM結(jié)構(gòu)上，我們基本定義了一些對外的接口用來控制組件的行為表現(xiàn) 
這些接口分別為：ishide、 maskIsHide 、 maskColor 、 enterAnimateName 、 outAnimateName 、 animationDuration  等

在清楚了一些基本接口的設(shè)計(jì)之后，我們就可以在 Component構(gòu)造器中定義接口了

Component({
  properties: {
    ishide: {
      type: Boolean,
      value: false,
      observer(newValue) {
      },
    enterAnimateName: {
      type: String,
      value: "bounce"
    },
    maskIsHide: {
      type: Boolean,
      value: false
    },
    outAnimateName: {
      type: String,
      value: ""
    },
    maskColor: {
      type: String,
      value: "rgba(0,0,0, .3)"
    },
    animationDuration: {
      type: Number,
      value: 1
    }
  },
})

接口定義完成已經(jīng)基本可以控制彈窗的現(xiàn)實(shí)、隱藏。但是我們在wxml結(jié)構(gòu)中用 wx:if="{{isShow}}" 語句來控制組件的顯示與隱藏的。為什么在接口定義的部分沒有看到呢？其實(shí)是有原因的，說清楚原因我們再繼續(xù)之后的開發(fā)

沒有定義isShow接口的原因有：

wx:if語句是直接控制元素的顯示隱藏，在組件進(jìn)入頁面的時候會有動畫，但是如果組件隱藏的時候也需要動畫呢？

組件在隱藏的時候如果有動畫，那么就必須要等動畫運(yùn)動結(jié)束才可以讓組件隱藏

基于上面的這兩個原因，我們把isShow字段放在data對象上

Component({
  properties: {
    ishide: {
      type: Boolean,
      value: false,
      observer(newValue) {
            if (newValue) {
             this.setData({
              isShow: newValue
            });
          } else {
            setTimeout(() => {
              this.setData({
                isShow: newValue
              });
            }, this.data.animationDuration * 1000)
          }
      }
    },
    ...
  },
  data: {
    isShow: false
  }
})

那既然解決了組件隱藏時動畫的展示。但是，如果在組件隱藏的時候就是不想要動畫呢？基于這樣的需求，于是我們再定義一個接口，用來控制組件隱藏的時候是否出現(xiàn)動畫

Component({
  properties: {
    ishide: {
      type: Boolean,
      value: false,
      observer(newValue) {
        if (this.data.outHasAnimate) {
          if (newValue) {
            this.setData({
              isShow: newValue
            });
          } else {
            setTimeout(() => {
              this.setData({
                isShow: newValue
              });
            }, this.data.animationDuration * 1000)
          }
        } else {
          this.setData({
            isShow: newValue
          });
        }
      }
    },
    outHasAnimate: {
      type: Boolean,
      value: true
    },
    ...
  },
  data: {
    isShow: false
  }
})

現(xiàn)階段，我們定義了組件的行為接口。那如果是這樣的業(yè)務(wù)場景：用戶點(diǎn)擊 mask 遮罩層，需要隱藏組件。那么我們就需要監(jiān)聽mask 遮罩層的點(diǎn)擊事件

Component({
  methods: {
    triggerToHide(e) {
      this.triggerEvent("hide", this.data.ishide)
    }
  },
})

上面是mask遮罩層的點(diǎn)擊方法，然后用 this.triggerEvent()自定義一個事件。之后在頁面中調(diào)用 hide自定義事件就可以達(dá)到監(jiān)聽組件的mask元素的點(diǎn)擊事件。

但是，如果產(chǎn)品提出了這樣的需求：點(diǎn)擊遮罩層不能隱藏組件。我們大可以不必在頁面中調(diào)用組件的自定義事件，我們也可以再定義一個接口，用于表示是否觸發(fā)組件的自定義事件

Component({
  properties: {
    clickMaskHide: {
      type: Boolean,
      value: false
    },
    ...
  },
  methods: {
    triggerToHide(e) {
      if (this.data.clickMaskHide) return false;
      this.triggerEvent("hide", this.data.ishide)
    }
  }
})

寫到這，副本基本算是通關(guān)了，可以收功了。但我們好像還遺漏了一個頁面布局相關(guān)的“小怪“。因?yàn)樵摻M件的使命是提供多種運(yùn)動方式，所以不會定義用于裝載內(nèi)容盒子的樣式。所以我們需要暴露一個樣式擴(kuò)展的接口。

由于小程序框架本身的限制，在頁面中是無法更改組件的內(nèi)部元素的樣式，所以小程序提供了一個接口：externalClasses

Component({
  properties: {
      ...
  },
  externalClasses: ["container-class"],
  methods: {
      ...
  },
  data: {
      ...
  }
})

在頁面的元素中用 class 屬性來接收組件外部的自定義樣式

寫在最后的提示：由于組件的運(yùn)動方式是使用的animate開源動畫庫，所以 container-class接口定義的樣式不能使用css3的 transform