返回顶部
首页 > 资讯 > 精选 >在小程序中如何实现3d裸眼轮播效果
  • 326
分享到

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

2023-06-26 05:06:33 326人浏览 薄情痞子
摘要

小编今天带大家了解在小程序中如何实现3D裸眼轮播效果,文中知识点介绍的非常详细。觉得有帮助的朋友可以跟着小编一起浏览文章的内容,希望能够帮助更多想解决这个问题的朋友找到问题的答案,下面跟着小编一起深入学习“在小程序中如何实现3d裸眼轮播效果

小编今天带大家了解在小程序中如何实现3D裸眼轮播效果,文中知识点介绍的非常详细。觉得有帮助的朋友可以跟着小编一起浏览文章的内容,希望能够帮助更多想解决这个问题的朋友找到问题的答案,下面跟着小编一起深入学习“在小程序中如何实现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:

<view class="swiper-box">  <image src="{{item}}" wx:for="{{background}}" class="swiper-bg {{animationStart || current === index ? 'fadeIn' : 'fadeOut'}} "></image>  <swiper indicator-dots="{{true}}" indicator-active-color="#fff" interval="{{3000}}" autoplay="{{true}}" circular="{{true}}" bindchange="handleChange" bindtransition="handleTransition" bindanimationfinish="handleFinish">    <block wx:for="{{background}}" wx:key="*this">      <swiper-item>        <view class="swiper-item-content" >          <image class="icon" src="../../images/cloud.png"  style="width: 90px; height: 90px;transfORM: translate3d({{x}}px, {{y}}px, {{z}}px);" wx:if="{{index === 0}}"></image>          <image class="icon" src="../../images/firecrackers.png" style="width: 90px; height: 90px;transform: translate3d({{x}}px, {{y}}px, {{z}}px);" wx:else></image>          <text class="text" wx:if="{{index === 0}}">新年快乐</text>          <text class="text" wx:else>大吉大利</text>        </view>      </swiper-item>    </block>  </swiper></view>

这里注意的是,由于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()改变元素偏移距离。

最终实现效果

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

这里看起来效果不是特别明显,原因有两个:

  • 素材图是我网上找到拼凑而成,总体合成效果并不美观,想达到较逼真的效果需要设计配合出素材图;

  • 在偏移至最大值时,未做缓冲动画,不合符直觉(这里后面有时间再研究实现);

额外的动画效果

其实借助该方向API,我们还可以作为触发动画的触发器。例如在手机翻转到一定角度值时,我们可以播放烟花效果

安装lottie-miniprogram包

npm i lottie-miniprogram

安装完之后记得在微信开发者工具中点击构建npm包

wxml:

<canvas id="canvas" type="2d" style="position: absolute;top: 0;left: 0;width: 300px; height: 200px;z-index: 99;"></canvas>

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裸眼轮播效果”的全部内容了,学会的朋友赶紧操作起来吧。相信编程网小编一定会给大家带来更优质的文章。谢谢大家对编程网网站的支持!

--结束END--

本文标题: 在小程序中如何实现3d裸眼轮播效果

本文链接: https://www.lsjlt.com/news/306918.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 在小程序中如何实现3d裸眼轮播效果
    小编今天带大家了解在小程序中如何实现3d裸眼轮播效果,文中知识点介绍的非常详细。觉得有帮助的朋友可以跟着小编一起浏览文章的内容,希望能够帮助更多想解决这个问题的朋友找到问题的答案,下面跟着小编一起深入学习“在小程序中如何实现3d裸眼轮播效果...
    99+
    2023-06-26
  • Android OpenGL如何实现APP裸眼3D效果
    Android OpenGL如何实现APP裸眼3D效果,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。原理简介 & OpenGL 的优势裸眼 3D 效果的本质是...
    99+
    2023-06-28
  • 微信小程序非swiper组件如何实现自定义伪3D轮播图效果
    这篇文章将为大家详细讲解有关微信小程序非swiper组件如何实现自定义伪3D轮播图效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果如下:我用了很笨的方法实现的,大致...
    99+
    2024-04-02
  • 微信小程序中怎么实现轮播图效果
    这篇文章主要介绍了微信小程序中怎么实现轮播图效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。先来看看效果图:主要用swiper + swi...
    99+
    2024-04-02
  • jquery如何实现轮播效果
    这篇文章主要为大家展示了“jquery如何实现轮播效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jquery如何实现轮播效果”这篇文章吧。 ...
    99+
    2024-04-02
  • 微信小程序如何实现下拉刷新和轮播图效果
    这篇文章将为大家详细讲解有关微信小程序如何实现下拉刷新和轮播图效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。先上图,再解释 wxml页面代码:<scroll-v...
    99+
    2024-04-02
  • Vue中如何实现轮播图效果
    这篇文章将为大家详细讲解有关Vue中如何实现轮播图效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Vue 过渡Vue 的过渡系统是内置的,在元素从 DOM 中插入或移除...
    99+
    2024-04-02
  • 微信小程序中如何实现轮播图
    这篇文章主要介绍了微信小程序中如何实现轮播图,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。业务需求:5个图片轮番播放,可以左右滑动,点击指示...
    99+
    2024-04-02
  • 如何在html中实现一个轮播图效果
    这期内容当中小编将会给大家带来有关如何在html中实现一个轮播图效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。html是什么html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签.通过这些...
    99+
    2023-06-06
  • 使用微信小程序实现轮播图切换效果
    使用微信小程序实现轮播图切换效果微信小程序是一种轻量级的应用程序,具有简单、高效的开发和使用特点。在微信小程序中,实现轮播图切换效果是常见的需求。本文将介绍如何使用微信小程序实现轮播图切换效果,并给出具体的代码示例。首先,在微信小程序的页面...
    99+
    2023-11-21
    轮播图 微信小程序 切换效果
  • android如何实现banner轮播图无限轮播效果
    小编给大家分享一下android如何实现banner轮播图无限轮播效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!具体内容如下效果展示第一步(权限配置)<uses-permission android:n...
    99+
    2023-05-30
    android banner
  • Swiper如何实现轮播图效果
    小编给大家分享一下Swiper如何实现轮播图效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下<!DOCTYP...
    99+
    2024-04-02
  • React如何实现轮播图效果
    这篇文章主要介绍“React如何实现轮播图效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“React如何实现轮播图效果”文章能帮助大家解决问题。效果:轮播功能用到了react-slick组件,安装...
    99+
    2023-07-02
  • css如何实现轮播图效果
    本文小编为大家详细介绍“css如何实现轮播图效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“css如何实现轮播图效果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。准备了3张大小相同的图片,将图片的文件名命名为...
    99+
    2023-07-04
  • Bootstrap中如何实现图片轮播效果
    这篇文章主要为大家展示了“Bootstrap中如何实现图片轮播效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Bootstrap中如何实现图片轮播效果”这篇文...
    99+
    2024-04-02
  • jquery如何实现焦点轮播效果
    这篇文章给大家分享的是有关jquery如何实现焦点轮播效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。HTML代码<!DOCTYPE html> <...
    99+
    2024-04-02
  • jQuery如何实现无缝轮播效果
    这篇文章将为大家详细讲解有关jQuery如何实现无缝轮播效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。这个无缝轮播和那个图片平滑滚动的原理差不多。原理:ul向左滚动,...
    99+
    2024-04-02
  • Vue如何实现无缝轮播效果
    这篇文章主要介绍Vue如何实现无缝轮播效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下代码1.子组件代码代码如下(示例):<template>  <div>&...
    99+
    2023-06-14
  • 纯js如何实现轮播图效果
    这篇文章主要介绍纯js如何实现轮播图效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!效果图代码 css * {    margin: 0;&nb...
    99+
    2023-06-25
  • RollViewPager如何实现图片轮播效果
    这篇文章将为大家详细讲解有关RollViewPager如何实现图片轮播效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。RollViewPager是一个自动轮播的Viewpager,支持无限循环。 触摸时...
    99+
    2023-05-30
    rollviewpager
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作