小程序wifi圆形扩散效果

小程序wifi圆形动态扩散效果

代码实现
wifstatus.wxml

wifstatus.wxss
@import “…/…/style/weui.wxss”;

.imagecss{
width: 400rpx;
height: 400rpx;
}
.fontcss {
margin-top: 34rpx;
display: flex;
flex-direction: row;
font-size:28rpx;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(0,0,0,1);
}
.fontSucCss{
font-size:28rpx;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(0,0,0,1);
margin-left: 10rpx;
}
.successTip {
margin-top: 34rpx;
display: flex;
flex-direction: row;
}
.imgcss {
position: absolute;
width: 80rpx;
height: 80rpx;
}
.inner {
width: 90rpx;
height: 90rpx;
background: #bd9e8b;
border-radius: 50%;
position: fixed;
left: 50%;
margin-left: -45rpx;
margin-top: 152rpx;
z-index: 10;
animation-duration: 2.4s;
z-index: 10;
-webkit-animation-name: state1;
animation-name: state1;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
opacity: 0;
}
@keyframes state1 {
0% {
opacity: .5;
-webkit-transform: scale(1);
transform: scale(1);
}

100% {
    opacity: 0;
    -webkit-transform: scale(4.5);
    transform: scale(4.5);
}

}
.imgcss {
position:fixed;
margin-left:-25rpx;
margin-top:17rpx;
left:50%;
width:56rpx;
height:56rpx;
}
.avatar {
position: fixed;
left: 50%;
margin-left: -43rpx;
margin-top: 155rpx;
border-radius: 100%;
width: 86rpx;
height: 86rpx;
background-color: #bd9e8b;
z-index: 11;
}
.outter {
animation-delay: 0.5s;
}
.outter1 {
animation-delay: 1s;
}
.outter2 {
animation-delay: 1.5s;
}

wifstatus.js
Page({

/**

• 页面的初始数据
  /
  data: {
  isShow: true, //判断连接状态
  system: ‘’, //版本号
  platform: ‘’ //系统 android
  },
  /*
• 生命周期函数–监听页面加载
  */
  onLoad: function (options) {
  let that = this;
  wx.getSystemInfo({
  success: function (res) {
  var system = ‘’;
  if (res.platform == ‘android’) {
  system = parseInt(res.system.substr(8));
  }
  if (res.platform == ‘ios’) {
  system = parseInt(res.system.substr(4));
  }
  if (res.platform == ‘android’ && system < 6) {
  that.openAlert(‘andriod手机版本暂时不支持’);
  }
  if (res.platform == ‘ios’ && system < 11) {
  that.openAlert(‘ios手机版本暂时不支持’);
  }
  that.setData({ platform: res.platform });
  that.startWifi(that);
  }
  })
  },
  startWifi: function (that) {
  wx.startWifi({
  success: function (res) {
  console.log(res.errMsg);
  that.connectWifiress(that);
  },
  fail: function (res) {
  console.log(res.errMsg);
  }
  })
  },
  connectWifiress: function (that) {
  wx.connectWifi({
  SSID: ‘WondertekWireless’,
  password: ‘Wondertek2019’,
  success: function (res) {
  console.log(res.errMsg);
  setTimeout(function () {
  that.setData({
  isShow: false
  });
  }, 2000)
  setTimeout(function () {
  wx.navigateTo({
  url: ‘…/…/pages/index/index?wificode=0’
  })
  }, 3000);
  },
  fail: function (res) {
  console.log(res);
  if (res.errCode == ‘12005’) {
  that.openAlert(‘请先手动打开wifi’);
  } else {
  that.openAlert(res.errMsg);
  }
  }
  })
  },
  openAlert: function (msg) {
  wx.showModal({
  content: msg,
  showCancel: false,
  success: function (res) {
  if (res.confirm) {
  wx.navigateTo({
  url: ‘…/…/pages/index/index?wificode=1’
  })
  }
  }
  });
  }
  })