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

前言: 由于公司业务调整,特意学习下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... 有什么问题下方讨论哈

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值