微信小程序涟漪特效代码

贴一个做微信小程序用到的特效代码，希望大家能够喜欢

这里是wxml

view class="ripple" style='rippleStyle' /view
view class="container" bindtouchstart='containerTap'  /view
--

下面则是WXSS:

page{
  height:100%
}

.container{
  width:100%;
  height:100%;                                  
  overflow: hidden

}  

.ripple {
  background-color: aquamarine;
  border-radius: 8rpx;
  height:4rpx;
  width:4rpx;
  margin-top: -90px;
  position: absolute;
  overflow: hidden
}

@-webkit-keyframes ripple {
  100% {
    webkit-transform: scale(100);
    transform: scale(100);
    background-color: transparent;
}

}

下面的部分为JS:

Page({
  data: {
    animation1:{}
  }, 
  containerTap: function (res) {
    var that = this
    var x = res.touches[0].pageX;
    var y = res.touches[0].pageY + 85;
    this.setData({
      rippleStyle: ''
    });
    setTimeout(function () {
      that.setData({
        rippleStyle: 'top:' + y + 'px;left:' + x + 'px;-webkit-animation: ripple 0.4s linear;animation:ripple 0.4s linear;'
      });
    }, 200)
  },
  changeHandle: function(){
    var animation = wx.createAnimation({
      duration:200,
      timingFunction: 'linear'
    })
    animation.scale(1.1,1.1).step(1);
    animation.scale(1,1).step(2);
    this.setData({
      animation1:animation
    })
  },
})

赏

谢谢你请我吃糖果

支付宝

微信