微信小程序之MaterialDesign（二）--view的ripple、reveal效果

ripple： 水涟漪效果 reveal： 揭露效果
ripple： 主要是两个view的叠加，设置最上层view的border-radius为100%，背景设置半透明。最下层view设置点击事件，并记录点击时的绝对坐标与相对坐标，坐标运算之后，同时动态改变最上层view的top与left，即可实现手指点击哪里，最上层view就会出现在那里。 最后实现涟漪，通过对上层view进行放大动画即可。
reveal：是ripple的变形，减慢动画执行时间，同时保持两层view的背景色动态保持一致即可。
JS:

    onClickPaper:function(e){
      var that = this
      var offLeft = e.currentTarget.offsetLeft
      var offTop = e.currentTarget.offsetTop
      var pageX = e.changedTouches[0].pageX
      var pageY = e.changedTouches[0].pageY
      console.log(pageX-offLeft-25)
      console.log(pageY-offTop-25)

      this.setData({
          ripple_style:'top:'+(pageY-offTop-25)+'px ; left:'+(pageX-offLeft-25)+'px ;-webkit-animation: ripple 0.4s linear; animation: ripple 0.4s linear;'

      })
      setTimeout(function(){
        that.setData({
          ripple_style:' -webkit-animation: ripple-reset 0s linear; animation: ripple-reset 0s linear;'

      })
      },300)

    //   do something

  }

CSS:

    .v-content {
      background-color: deepskyblue;
      margin-top: 20rpx;
      width: 40%;
      height: 50px;
      overflow: hidden;
      box-shadow: 2px 2px 2px 1px lightgrey;
      border-radius: 2px;
      text-align: center;
      position: relative;
      margin-bottom: 80rpx;
    }

    .ripple {
      background-color: rgba(0, 0, 0, 0.15);
      border-radius: 100%;
      height: 50px;
      width: 50px;
      position: absolute;

    }
     @-webkit-keyframes ripple {
      100% {
        -webkit-transform: scale(15);
        transform: scale(15);
      }
    }
    @keyframes ripple {
      100% {
        -webkit-transform: scale(15);
        transform: scale(15);
      }
    }

效果图：

源码：https://github.com/jeffer0323/We-MaterialDesign