手把手带你在小程序中怎么实现3d裸眼轮播效果

小程序轮播如何实现3d裸眼效果？下面本篇文章来给大家介绍一下实现方法，为春节气氛添灯加彩，希望对大家有所帮助！

一个APP众多功能模块中，首页轮播图扮演着重要角色，它是分发重点资讯的入口。想起几个月前看过一篇文章--《自如客APP裸眼3D效果的实现》，该文提及在安卓app端实现了如下裸眼3d banner轮播效果图：

受该文启发，决定“依葫芦画瓢”，尝试在小程序端模拟实现一个春节氛围满满的3d裸眼效果轮播图。

原理

仔细观察上面实现的动态效果图，可以看出该banner图并非常规的一张图片，而是采用了一张图内容分层的方式叠加显示（上文提及的文章有提到，是采用了背景层，前景和中景三个叠加后呈现，可以先移步上文了解），然后监听手机方向传感器，根据方向对前景和背景进行移动，造成视觉上的景深效果。

有趣的是，如果你使用的是iPhone手机，相信你应该能发现在首页状态下，随着手机不同方向的转动，背景图会跟着反方向轻微移动，也能给人一种类似的景深效果。（效果如下图）

实战

介绍完了原理，那就开始实战吧。

翻阅小程序文档，我们需要用到两个API：wx.startDeviceMotionListening 和 wx.onDeviceMotionChange。 这里我们需要重点关注的是wx.onDeviceMotionChange这个API返回的内容，根据文档，该API返回如下三个值：

如果你是第一次接触这个API，相信你看了文档也是一头雾水，接下来我将用chrome浏览器调试工具帮你彻底理解这三个值分别是什么意思。

借助chrome开发者工具理解API返回值

打开浏览器开发者工具，按照如下步骤打开传感器调试：

打开后，看这里：

咦？这不是一样的吗？没错，这里显示的三个值刚好与该API返回值对应。可以看到在alpha=0,beta=90,gamma=0的情况下，代表手机是垂直立在平面，我门可以点击选项或者直接在输入框中修改值，就可以直观的看到随着值的变化，手机的翻转状态变化，例如手机平放桌面时，三个参数值如下：

有了上面实时模拟的工具，接下来这个图就好理解了：

• alpha：表示设备沿 Z 轴旋转的角度，范围为 0~360；
• beta：表示设备在x轴上的旋转角度，范围为-180~180。它描述的是设备由前向后旋转的情况；
• gamma：表示设备在y轴上的旋转角度，范围为-90~90。它描述的是设备由左向右旋转的情况。

代码

wxml:

<view>
  <image></image>
  <swiper>
    <block>
      <swiper-item>
        <view>
          <image></image>
          <image></image>
          <text>新年快乐</text>
          <text>大吉大利</text>
        </view>
      </swiper-item>
    </block>
  </swiper></view>