image 微信小程序flex_微信小程序重力感应使你的授权页面更加炫酷

作者｜Mr.Chen  编辑｜PP_Team

GK 小寨导读：在更多的APP应用中授权登录页面是非常常见的,今天我就分享一款微信小程序使用重力感应技术,使你的授权页面更加炫酷.

更多干货内容请关注微信公众号“极客小寨”

案例预览图

案例JS文件

首先，我们参考js逻辑。参考微信小程序有关陀螺仪的API,确保已下载中指定的正确文件夹中。

onReady: function(){
    var _this = this;
    setTimeout(function(){
      _this.setData({
        remind: ''
      });
    }, 1000);
    wx.onAccelerometerChange(function(res) {
      var angle = -(res.x*30).toFixed(1);
      if(angle>14){ angle=14; }
      else if(angle<-14){ angle=-14; }
      if(_this.data.angle !== angle){
        _this.setData({
          angle: angle
        });
      }
    });
  },

案例wxml文件

我们前端的布局如下:

<view class="container">
  <view class="remind-box" wx:if="{{remind}}">

  view>

  <block wx:else>
    <image class="title" src="/static/images/title.png">image>
    <view class="content">
      <view class="hd" style="transform:rotateZ({{angle}}deg);">
        <open-data class="logo" type="userAvatarUrl">open-data>
        <image class="wave" src="/static/images/wave.png" mode="aspectFill">image>
        <image class="wave wave-bg" src="/static/images/wave.png" mode="aspectFill">image>
      view>
      <view class="bd">
         <image class="smalltitle" src="/static/images/confirm-word1.png">image>
        <view class="confirm-btn">
          <button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">立即体验button>
        view>
        <view class="copyright">© {{year}} 极客小寨<text bindtap='goTeam'>OkYoung团队text> 倾情出品view>
      view>
    view>
  block>
view>

显案例wxss文件

使页面变得更美观,编写css样式文件

/**start.wxss**/
.container {
  background: #1b1d32;
  align-items: stretch;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
.content{
  flex: 1;
  display: flex;
  position: relative;
  z-index: 10;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-bottom: 450rpx;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(244,244,244,0)), color-stop(0.1, #f4f4f4), to(#f4f4f4));
  opacity: 0;
  transform: translate3d(0,100%,0);
  animation: rise 3s cubic-bezier(0.19, 1, 0.22, 1) .25s forwards;
}
@keyframes rise{
  0% {opacity: 0;transform: translate3d(0,100%,0);}
  50% {opacity: 1;}
  100% {opacity: 1;transform: translate3d(0,450rpx,0);}
}
.title{
  position: absolute;
  top: 30rpx;
  left: 50%;
  width: 600rpx;
  height: 200rpx;
  margin-left: -300rpx;
  opacity: 0;
  animation: show 2.5s cubic-bezier(0.19, 1, 0.22, 1) .5s forwards;
}

.smalltitle{
  position: absolute;
  top: 50rpx;
  left: 50%;
  width: 600rpx;
  height: 200rpx;
  margin-left: -300rpx;
  opacity: 0;
  animation: show 2.5s cubic-bezier(0.19, 1, 0.22, 1) .5s forwards;
}

@keyframes show{
  0% {opacity: 0;}
  100% {opacity: .95;}
}

.hd {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1000rpx;
  margin-left: -500rpx;
  height: 200rpx;
  transition: all .35s ease;
}

.logo {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 200rpx;
  width: 140rpx;
  height: 140rpx;
  margin-left: -80rpx;
  border-radius: 120rpx;
  animation: sway 10s ease-in-out infinite;
  opacity: .95;
  overflow: hidden;
}
@keyframes sway{
  0% {transform: translate3d(0,20rpx,0) rotate(-15deg); }
  17% {transform: translate3d(0,0rpx,0) rotate(25deg); }
  34% {transform: translate3d(0,-20rpx,0) rotate(-20deg); }
  50% {transform: translate3d(0,-10rpx,0) rotate(15deg); }
  67% {transform: translate3d(0,10rpx,0) rotate(-25deg); }
  84% {transform: translate3d(0,15rpx,0) rotate(15deg); }
  100% {transform: translate3d(0,20rpx,0) rotate(-15deg); }
}
.wave {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  opacity: 0.725;
  height: 260rpx;
  width: 2250rpx;
  animation: wave 10s linear infinite;
}
.wave-bg {
  z-index: 1;
  animation: wave-bg 10.25s linear infinite;
}
@keyframes wave{
  from {transform: translate3d(125rpx,0,0);}
  to {transform: translate3d(1125rpx,0,0);}
}
@keyframes wave-bg{
  from {transform: translate3d(375rpx,0,0);}
  to {transform: translate3d(1375rpx,0,0);}
}

.bd {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  animation: bd-rise 2s cubic-bezier(0.23,1,0.32,1) .75s forwards;
  opacity: 0;
  margin-top:6%;
}
@keyframes bd-rise{
  from {opacity: 0; transform: translate3d(0,60rpx,0); }
  to {opacity: 1; transform: translate3d(0,0,0); }
}
form {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.input-group {
  display: flex;
  align-items: center;
  padding: 25rpx 10rpx;
  margin: 40rpx 3%;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #f4f4f4;
  transition: all .25s ease-in-out;
}
.input-group.active {
  border: 2px solid #7acfa6;
}
.input-label {
  color: #888;
  font-size: 13pt;
  height: 25rpx;
  line-height: 25rpx;
  padding: 0 25rpx;
  border-right: 1px solid #d8d8d8; 
}
.input-group input,
.input-group picker {
  flex: 1;
  font-size: 13pt;
  min-height: 52rpx;
  height: 52rpx;
  line-height: 52rpx;
  padding: 0 25rpx;
}
.input-placeholder,
.input-group picker.placeholder {
  color: #ccc;
}
.login-help {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 30rpx;
  font-size: 10pt;
  color: #bbb;
}
.login-help-img {
  width: 11pt;
  height: 11pt;
  margin: 0 5rpx;
}
.confirm-logo {
  font-size: 13pt;
  line-height: 200px;
  height: 85rpx;
  text-align: center;
}
/*
.confirm-btn {
  font-size: 13pt;
  line-height: 85rpx;
  height: 85rpx;
  background: #ffcc01;
  color: black;
  text-align: center;
  border-radius: 50px;
  margin: 50% 20% 30% 20%;
}
.confirm-btn:active {
  opacity: .8;
}
*/
.confirm-btn button{
  font-size: 13pt;
  line-height: 85rpx;
  height: 85rpx;
  background: #ffcc01;
  color: black;
  text-align: center;
  border-radius: 50px;
  margin: 50% 20% 30% 20%;
}
.help {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 80%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 50px rgba(22,22,22,.35);
  transform: translate3d(0,-400rpx,0);
}
.box-hd {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  border-bottom: 1px solid #eee;
}
.box-title {
  font-size: 13pt;
}
.box-close {
  position: absolute;
  right: 20rpx;
  width: 35rpx;
  height: 35rpx;
  padding: 15rpx;
}
.box-bd {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 15rpx 40rpx 30rpx;
}
.help-q {
  color: #999;
  font-size: 11pt;
  line-height: 200%;
  margin-top: 5rpx;
}
.help-a {
  text-indent: 1em;
  line-height: 160%;
  display: flex;
  flex-direction: column;
}
.help-a text{
  word-break: break-all;
}
/**登录动画**/
.login_video{
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 750rpx;
  margin-left: -375rpx;
  height: 1334rpx;
  margin-top: -667rpx;
}
.video_hidden{
  visibility: hidden;
}
page .wx-video-bar{
  display: none;
}

.copyright {
  font-size: 28rpx;
  color: #999;
  position: fixed;
  top: 85%;
  left: 0;
  right: 0;
  padding: 30rpx;
  text-align: center;
}
.copyright text{
  font-size: 28rpx;
  color: #118fff;
  margin-left: 15rpx;
}

了解更多关于这片文章的信息:欢迎关注【极客小寨】微信公众号，回复登录下载链接！所有文档会持续更新，欢迎关注一起成长！

转载请注明：《微信小程序重力感应使你的授权页面更加炫酷》

点击下方图片即可阅读

微信小程序-基于canvas画画涂鸦

基于canvas的画画涂鸦

---

微信小程序-自定义底部导航

微信小程序自定义底部导航

---

关于P&P Team的那些事儿

更多分享，请持续关注“极客小寨”第一时间关注程序猿(媛)身边的故事

- The End -

「若你有原创文章想与大家分享，欢迎投稿。」

加编辑微信ID，备注#投稿#：

程序 丨 geekxz  

邮箱 丨 geekxz@aliyun.com