前端代码实现摇一摇功能，全网详解

前言： 由于公司业务调整，特意学习下uni项目框架，其实根据官方api就是实现很多功能，其实都是一些小坑要走，下面来说一下前端项目中如何代码实现摇一摇功能 

下面是mpaas中使用摇一摇功能，微信小程序同
直接上代码：
html代码如下

<!-- html-->
<view class="page">
  <!-- <button type="primary" onTap="watchShake">
    绑定摇一摇，点击 Shake 按钮看效果
  </button> -->
  <view class="yao">
    <image src="../image/shake.jpg" class="item-img pic_mobel" a:if="{{shakeScroll}}" mode="scaleToFill"></image>
    <image src="../image/shake.jpg" class="item-img shake-slow " a:if="{{!shakeScroll}}" mode="scaleToFill"></image>
  </view>
</view>

js代码如下

// API-DEMO page/API/watch-shake/watch-shake.js
Page({
  data: {
    shakeScroll: false
  },
  onLoad() {
    var _this = this
    _this.loadShake();
  },
  setTimeoutFunc() {
    var _this = this
    _this.setData({
      shakeScroll: true
    })
    clearTimeout(timer);
    var timer = setTimeout(() => {
      _this.setData({
        shakeScroll: false
      })
      _this.loadShake()
    }, 2000);
  },
  loadShake(){
    var _this = this
    //事件，可以进行操作
    my.watchShake({
      success: function(e) {
        _this.setTimeoutFunc()
        
      }
    });
  }
});

css 代码如下
 

page {
  background-color: #fff;
  height:100%;
  display: flex;
  justify-content: center;
}
.scroll {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-img {
  margin: 29rpx 0 20px 0;
  width:500rpx; height:500rpx;
}
.yao{
  width:500rpx; height:500rpx;
}
.pic_mobel{
  width:100%; height:100%;
  transform-origin:center;
  -webkit-animation: pic_mobel 0.5s ease infinite;
  -moz-animation: pic_mobel 0.5s ease infinite;
  
   -o-animation:pic_mobel 0.5s ease infinite;
    animation: pic_mobel 0.5s ease infinite;
   -moz-transform-origin:center;
  -ms-transform-origin:center;
  -o-transform-origin:center;
  transform-origin:center;
  
  /*-webkit-transform: rotate(255deg);
  -moz-transform: rotate(255deg);
  -o-transform: rotate(255deg);
  -ms-transform: rotate(255deg);
  transform: rotate(255deg);    */
  }
  @keyframes pic_mobel{    
  0%{
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);    
  }
  10%{
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  -o-transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  transform: rotate(6deg);    
  }
  20%{
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg);    
    } 
  25%{
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  transform: rotate(10deg);
  }
  30%{
    -webkit-transform: rotate(12deg);
    -moz-transform: rotate(12deg);
    -o-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    transform: rotate(12deg);    
    }
    40%{
      -webkit-transform: rotate(14deg);
      -moz-transform: rotate(14deg);
      -o-transform: rotate(14deg);
      -ms-transform: rotate(14deg);
      transform: rotate(14deg);    
      }  
  50%{
  -webkit-transform: rotate(16deg);
  -moz-transform: rotate(16deg);
  -o-transform: rotate(16deg);
  -ms-transform: rotate(16deg);
  transform: rotate(16deg);    
      }
      55%{
        -webkit-transform: rotate(-6deg);
        -moz-transform: rotate(-6deg);
        -o-transform: rotate(-6deg);
        -ms-transform: rotate(-6deg);
        transform: rotate(-6deg);    
        }
        60%{
          -webkit-transform: rotate(-8deg);
          -moz-transform: rotate(-8deg);
          -o-transform: rotate(-8deg);
          -ms-transform: rotate(-8deg);
          transform: rotate(-8deg);    
          } 
        75%{
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -o-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        transform: rotate(-10deg);
        }
        80%{
          -webkit-transform: rotate(-12deg);
          -moz-transform: rotate(-12deg);
          -o-transform: rotate(-12deg);
          -ms-transform: rotate(-12deg);
          transform: rotate(-12deg);    
          }
          90%{
            -webkit-transform: rotate(-14deg);
            -moz-transform: rotate(-14deg);
            -o-transform: rotate(-14deg);
            -ms-transform: rotate(-14deg);
            transform: rotate(-14deg);    
            }  
        
  }
      

原创不易，来个赞撒，biubiubiu... 有什么问题下方讨论哈