站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

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

时间:2022-01-12 [网络编程]作者:fabuyuan 浏览:5 次

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

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

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

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

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

原理

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

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

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

实战

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

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

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

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

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

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

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

打开后,看这里:

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

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

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

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

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

  • 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裸眼轮播效果  2

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

  • 素材图是我网上找到拼凑而成,总体合成效果并不美观,想达到较逼真的效果需要设计配合出素材图;
  • 在偏移至最大值时,未做缓冲动画,不合符直觉(这里后面有时间再研究实现);

额外的动画效果

其实借助该方向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()

处理触发即可

完整代码

https://github.com/pengjinlong/cases/tree/main/spring-article

本文转载自:https://juejin.cn/post/7051490823497580574

作者:码克吐温

【相关学习推荐:小程序开发教程】

以上就是手把手带你在小程序中怎么实现3d裸眼轮播效果的详细内容,更多请关注站长家园其它相关文章!

本文标签:  小程序轮播3d裸眼

转载请注明来源:手把手带你在小程序中怎么实现3d裸眼轮播效果

本文永久链接地址:https://www.adminjie.com/post/7567.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • 使用jq如何删除css样式

      使用jq如何删除css样式

      删除方法:1、用removeClass()或toggleClass()移除指定CSS类,语法“removeClass("类名")”或“toggleClass("...

    • css3如何让盒子水平居中

      css3如何让盒子水平居中

      css3让盒子水平居中的方法:1、使用margin属性,给盒子元素添加“margin:0auto;”样式即可水平居中;2、利用flex弹性布局来实现水平居中...

    • 如何将css文件设置为utf-8

      如何将css文件设置为utf-8

      在css中,可以利用“@charset”规则来将字符编码设置为“utf-8”,该规则可以指定样式文件中使用的字符编码,语法为“@charset"UTF-8";...

    • css怎么设置按钮中的字大小

      css怎么设置按钮中的字大小

      css设置按钮中字体大小的方法:1、给按钮元素添加class属性并设置属性值;2、使用class选择器选中按钮元素,添加“font-size:数值px;”样式即...

    • javascript标识符不能以什么开头

      javascript标识符不能以什么开头

      在javascript中,标识符不能以数字开头,即第一个字符不能为数字,必须是字母、下划线“_”或美元符号“$”,其后的字符可以是字母、数字或下划线、美元符号;...

    热门文章