在小程序中如何实现3d裸眼轮播效果
小编今天带大家了解在小程序中如何实现3d裸眼轮播效果,文中知识点介绍的非常详细。觉得有帮助的朋友可以跟着小编一起浏览文章的内容,希望能够帮助更多想解决这个问题的朋友找到问题的答案,下面跟着小编一起深入学习“在小程序中如何实现3d裸眼轮播效果”的知识吧。
创新互联建站主营沾益网站建设的网络公司,主营网站建设方案,重庆APP软件开发,沾益h5成都微信小程序搭建,沾益网站营销推广欢迎沾益等地区企业咨询
小程序轮播如何实现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-minapp-39237.cloud.ifanrusercontent.com/1n6jtVIbbJ3rnAv7.jpg', 'https://cloud-minapp-39237.cloud.ifanrusercontent.com/1n6mBOvOutOFQ3E8.png',], x: 0, y: 0, z: 0, animationFinish: true, // 动画是否执行完成 animationStart: false, // 是否开始执行动画 current: 0, }, // 动画开始执行 handleTransition(e) { if (this.data.animationFinish) { this.setData({ animationFinish: false, animationStart: true, }) } }, // 动画执行结束 handleFinish() { this.setData({ animationFinish: true, animationStart: false, }) }, // current值变化 handleChange(e) { this.setData({ current: e.detail.current, }) }, onLoad() { const that = this; // 监听方向变化 wx.startDeviceMotionListening({ success() { wx.onDeviceMotionChange(function (res) { const { alpha, // 0-360 beta, // -180-180 gamma // -90- 90 } = res const disX = gamma / 90 * 20 const disY = beta / 90 * 12 let z = 0 if (disX > 0 || disY > 0) { z = 20 } else { z = -20 } that.setData({ x: disX, y: disY, z }) }) } }) } })
这里要做解释的代码是
const disY = beta / 90 * 12
正常我们使用手机是屏幕朝上,所以取相对值一半即可。
根据计算得到的偏移x,y后,页面通过transform: translate3d()
改变元素偏移距离。
最终实现效果
这里看起来效果不是特别明显,原因有两个:
素材图是我网上找到拼凑而成,总体合成效果并不美观,想达到较逼真的效果需要设计配合出素材图;
在偏移至最大值时,未做缓冲动画,不合符直觉(这里后面有时间再研究实现);
额外的动画效果
其实借助该方向API,我们还可以作为触发动画的触发器。例如在手机翻转到一定角度值时,我们可以播放烟花效果
安装lottie-miniprogram包
npm i lottie-miniprogram
安装完之后记得在微信开发者工具中点击构建npm包
wxml:
js:
onLoad() { // 初始化lottie动画 wx.createSelectorQuery().select('#canvas').node(res => { const canvas = res.node const context = canvas.getContext('2d') lottie.setup(canvas) lottieInstance = lottie.loadAnimation({ path: 'https://assets10.lottiefiles.com/packages/lf20_1qfekvox.json', autoplay: true, loop: false, rendererSettings:{ context } }) }).exec() }
然后在wx.onDeviceMotionChange
中调用
lottieInstance.play()
处理触发即可
感谢大家的阅读,以上就是“在小程序中如何实现3d裸眼轮播效果”的全部内容了,学会的朋友赶紧操作起来吧。相信创新互联小编一定会给大家带来更优质的文章。谢谢大家对创新互联网站的支持!
本文题目:在小程序中如何实现3d裸眼轮播效果
当前地址:http://scyanting.com/article/jedhhh.html