一步步指导如何用小程序实现3D裸眼轮播效果。

如何实现小程序轮播中的3D裸眼效果？下一篇文章将向您展示如何实现它来装饰新年气氛。 希望对您有帮助！

在APP众多的功能模块中，首页轮播扮演着重要的角色。 它是分发重要信息的网关。 我记得几个月前读过一篇文章--《在Ziruke APP中实现裸眼3D效果》。 本文介绍了在Android应用程序中实现了以下裸眼3D横幅轮播效果：

受到本文的启发，“按照示例”模拟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:

新年快乐 大吉利

注意 swiper 是 swiper-item 只能嵌套。 在组件中，背景图片必须与swiper放在同一水平面上，并显示在适当的位置。

js:

//index.js//获取应用实例 const app = getApp()Page({ data: { background: ['https://cloud-m inapp-39237.cloud .ifanrusercontent.com/1n6jtVIbbJ3rnAv7.jpg', 'https://cloud-minapp-39237.c Loud.ifanrusercontent.com/1n6mBOvOutOFQ3E8.png',], x: 0, y: 0, z: 0, AnimeFinish: true, // 动画是否完成animeStart: false, // 动画是否开始 current : 0 , }, // 动画开始运行handleTransition(e) { if (this.data.animationFinish) { this.setData({animeFinish: false,animeStart:true, }) } }, // 动画执行已完成handleFinish() { this.setData({animeFinish: true,animeStart: false, }) }, // 当前值of handleChange(e) { this.setData({ current: e.detail.current, }) }, onLoad() { const that = this; // 聆听方向的变化。StartDeviceMotionListening({Success(){wx.ondeviceMotionChange(function(res)){const {alpha, // 0- 360 赌a, // -180-180 gamma //-90- 90 } = 分辨率 const disX = gamma / 90 * 20 const disY = beta / 90 * 12 z = 0 如果 (disX > 0 || disY > 0) { z = 20                                                                                                                                             x: disX, y: disY, z ) }})

这里描述的代码是：

const disY = beta / 90 * 12

通常，使用手机时，屏幕朝下。 因此，取相对值的一半。 计算出偏移x、y后，页面通过transform:translate3d()改变元素的偏移距离。

最终效果

这里的效果不是特别明显，有两个原因：

库存照片是我在网上找到的，是拼凑出来的。整个事情是一个复合体。 效果并不美观。 ，如果想要达到更加真实的效果，就需要对素材图片进行设计和搭配。 一旦偏移量达到最大值，就不会发生缓冲区动画。 这并不直观（稍后有时间时您会了解它）。进行研究）；附加动画效果

其实这个方向API也可以作为触发动画的触发器。 例如，当您将手机翻转到一定角度时，可以播放烟花效果。

lottie-小程序包npm i 安装Lottie-小程序

安装完成后，别忘了点击【构建npm包】。 微信开发者工具

wxml:

js:

onLoad() { // 初始化Lottie动画 wx.createSelectorQuery() .sel ect( '#canvas').node(res => { const Canvas = res.node const context = Canvas.getContext('2d') Lottie.setup(canvas) LottieInstance = Lottie.loadAnimation ({ 路径: 'https://assets10.lottiefiles.com/packages/lf20_1qfekvox.json', 自动播放: true, 循环: false, 渲染设置: {context}}) } ）。 Exec()}

然后在wx.ondEviceMotionChange中调用

Lottieinstance.play()

处理触发

相关学习推荐：小程序开发教程]

PHP快速学习视频免费教程（从初学者到大师）

如何开始学习PHP？ 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

这几篇文章你可能也喜欢：

• 如何用手在小程序中实现3d裸眼轮播效果？

本文由主机参考刊发，转载请注明：一步步指导如何用小程序实现3D裸眼轮播效果。 https://zhujicankao.com/142221.html