摘要：組件介紹組件的內部運動是動畫，使用的是開源動畫庫的出現是為了解決小程序開發時的復雜運動會話框。但是我們在結構中用語句來控制組件的顯示與隱藏的。因為該組件的使命是提供多種運動方式，所以不會定義用于裝載內容盒子的樣式。

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

復雜的運動會話彈窗

多適用于授權彈窗、兒童類小程序項目、抽獎類小程序項目等

只定制運動動畫，不提供任何UI界面

在上一步我們清楚的知道了組件的使用場景以及一些需要對外提供的接口 
那么DOM結構(wxml)應該怎么設計呢？

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

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

組件的內部DOM結構(wxml)

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

maskColor 用來定義遮罩層的顏色 

enterAnimateName 用來控制組件出現時候的動畫 

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

animationDuration 用來控制動畫運動的時間 

基本的DOM結構出來之后，下面是給這些DOM結構編寫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結構上，我們基本定義了一些對外的接口用來控制組件的行為表現 
這些接口分別為：ishide、 maskIsHide 、 maskColor 、 enterAnimateName 、 outAnimateName 、 animationDuration  等

在清楚了一些基本接口的設計之后，我們就可以在 Component構造器中定義接口了

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
    }
  },
})

接口定義完成已經基本可以控制彈窗的現實、隱藏。但是我們在wxml結構中用 wx:if="{{isShow}}" 語句來控制組件的顯示與隱藏的。為什么在接口定義的部分沒有看到呢？其實是有原因的，說清楚原因我們再繼續之后的開發

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

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

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

基于上面的這兩個原因，我們把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
  }
})

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

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
  }
})

現階段，我們定義了組件的行為接口。那如果是這樣的業務場景：用戶點擊 mask 遮罩層，需要隱藏組件。那么我們就需要監聽mask 遮罩層的點擊事件

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

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

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

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

寫到這，副本基本算是通關了，可以收功了。但我們好像還遺漏了一個頁面布局相關的“小怪“。因為該組件的使命是提供多種運動方式，所以不會定義用于裝載內容盒子的樣式。所以我們需要暴露一個樣式擴展的接口。

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

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

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

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