tuniao-ui/vipPage/home/gravity/page1/page1.vue

<template>
  <view class="vip-template-gyroscope-page">
    
    <view style="color: #FFFFFF;position: absolute;top: 0;left: 0;" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <view>x轴数据:{{acceleronmeterX}}</view>
      <view>y轴数据:{{acceleronmeterY}}</view>
      <view>z轴数据:{{acceleronmeterZ}}</view>
    </view>
    
    <view class="background">
      <image src="https://resource.tuniaokj.com/images/gravity/1/5.png"></image>
    </view>
    
    <view class="item__1 item__animation" :style="{transform: `translateX(${translateInfo[0].x}px)`}">
      <image src="https://resource.tuniaokj.com/images/gravity/1/1.png" mode="widthFix"></image>
    </view>
    
    <view class="item__2 item__animation" :style="{transform: `translateX(${translateInfo[1].x}px)`}" @longtap.stop="toggleDirection">
      <image src="https://resource.tuniaokj.com/images/gravity/1/2.png" mode="widthFix"></image>
    </view>
    
    <view class="item__3 item__animation" :style="{transform: `translateX(${translateInfo[2].x}px)`}">
      <image src="https://resource.tuniaokj.com/images/gravity/1/3.png" mode="widthFix"></image>
    </view>
    
    <view class="item__4 item__animation" :style="{transform: `translateX(${translateInfo[3].x}px)`}">
      <image src="https://resource.tuniaokj.com/images/gravity/1/4.png" mode="widthFix"></image>
    </view>
    
    <!-- 回到首页悬浮按钮-->
    <nav-index-button></nav-index-button>
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  import NavIndexButton from '@/libs/components/nav-index-button.vue'
  
  export default {
    name: 'GravityPage1',
    mixins: [template_page_mixin],
    components: { NavIndexButton },
    data() {
      return {
        acceleronmeterX: 0,
        acceleronmeterY: 0,
        acceleronmeterZ: 0,
        translateInfo: [
          {max: 60, min: -60, speed: 0.8, x: 0},
          {max: 45, min: -45, speed: 0.6, x: 0},
          {max: 33.75, min: -33.75, speed: 0.45, x: 0},
          {max: 25.31, min: -25.31, speed: 0.3375, x: 0}
        ],
        positiveDirection: true
      }
    },
    onLoad() {
      this.initAccelerometer()
    },
    onUnload() {
      this.stopAccelerometer()
    },
    methods: {
      // 初始化加速度并设置监听函数
      initAccelerometer() {
        uni.onAccelerometerChange(this.listenerAccelerometerData)
      },
      // 停止监听加速度数据
      stopAccelerometer() {
        uni.stopAccelerometer()
      },
      listenerAccelerometerData(res) {
        // console.log(res.x, res.y, res.z);
        this.acceleronmeterX = res.x.toFixed(2)
        this.acceleronmeterY = res.y.toFixed(2)
        this.acceleronmeterZ = res.z.toFixed(2)
        
        // let acceleronmeterX = Math.abs(this.acceleronmeterX) > 0.05 ? this.acceleronmeterX < 0 ? -0.05 : 0.05 : this.acceleronmeterX
        
        // if (acceleronmeterX < 0) {
        //   for (let index in this.translateInfo) {
        //     let item = this.translateInfo[index]
        //     const x = item.speed * Math.abs(acceleronmeterX)
        //     item.x = item.x + x > item.max ? item.max : item.x + x
        //     this.$set(this.translateInfo, index, item)
        //   }
        // } else if (acceleronmeterX > 0) {
        //   for (let index in this.translateInfo) {
        //     let item = this.translateInfo[index]
        //     const x = item.speed * acceleronmeterX
        //     item.x = item.x - x < item.min ? item.min : item.x - x
        //     this.$set(this.translateInfo, index, item)
        //   }
        // }
        
        if (this.positiveDirection) {
          if (this.acceleronmeterX > 0) {
            // 手机向左倾斜，图像向右移动
            this.translateRightMove()
          } else if (this.acceleronmeterX < 0) {
            // 手机向右倾斜，图像向左移动
            this.translateLeftMove()
          }
        } else {
          if (this.acceleronmeterX < 0) {
            // 手机向左倾斜，图像向右移动
            this.translateRightMove()
          } else if (this.acceleronmeterX > 0) {
            // 手机向右倾斜，图像向左移动
            this.translateLeftMove()
          }
        }
      },
      // 长按切换移动方向
      toggleDirection() {
        this.positiveDirection = !this.positiveDirection
      },
      // 向左移动
      translateLeftMove() {
        for (let index in this.translateInfo) {
          let item = this.translateInfo[index]
          // 计算当前图片位置和允许移动的边距距离
          const distance = Math.abs(item.min - item.x)
          const x = item.speed * (distance / 2)
          item.x = item.x - x < item.min ? item.min : item.x - x
          this.$set(this.translateInfo, index, item)
        }
      },
      // 向右移动
      translateRightMove() {
        for (let index in this.translateInfo) {
          let item = this.translateInfo[index]
          // 计算当前图片位置和允许移动的边距距离
          const distance = Math.abs(item.max - item.x)
          const x = item.speed * (distance / 2)
          item.x = item.x + x > item.max ? item.max : item.x + x
          this.$set(this.translateInfo, index, item)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .vip-template-gyroscope-page {
    position: relative;
    width: 100vw;
    height: 100vh;
  }
  
  .background {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
   width: 100%;
   height: 100%;
    z-index: -1;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .item {
    &__1 {
      position: absolute;
      top: 210rpx;
      left: 84rpx;
      width: 100%;
      // height: 100%;
      z-index: 5;
    }
    
    &__2 {
      position: absolute;
      top: 885rpx;
      left: 84rpx;
      width: 100%;
      // height: 100%;
      z-index: 4;
    }
    
    &__3 {
      position: absolute;
      top: 138rpx;
      left: 88rpx;
      width: 100%;
      // height: 100%;
      z-index: 3;
    }
    
    &__4 {
      position: absolute;
      top: 390rpx;
      left: 84rpx;
      width: 100%;
      // height: 100%;
      z-index: 2;
    }
    
    &__animation {
      transition: transform 1.6s ease;
    }
  }
</style>