小編今天帶大家了解在小程序中如何實現(xiàn)3d裸眼輪播效果，文中知識點介紹的非常詳細(xì)。覺得有幫助的朋友可以跟著小編一起瀏覽文章的內(nèi)容，希望能夠幫助更多想解決這個問題的朋友找到問題的答案，下面跟著小編一起深入學(xué)習(xí)“在小程序中如何實現(xiàn)3d裸眼輪播效果”的知識吧。

創(chuàng)新互聯(lián)建站主營沾益網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP軟件開發(fā),沾益h5成都微信小程序搭建,沾益網(wǎng)站營銷推廣歡迎沾益等地區(qū)企業(yè)咨詢

小程序輪播如何實現(xiàn)3d裸眼效果？下面本篇文章來給大家介紹一下實現(xiàn)方法，為春節(jié)氣氛添燈加彩，希望對大家有所幫助！

原理

仔細(xì)觀察上面實現(xiàn)的動態(tài)效果圖，可以看出該banner圖并非常規(guī)的一張圖片，而是采用了一張圖內(nèi)容分層的方式疊加顯示（上文提及的文章有提到，是采用了背景層，前景和中景三個疊加后呈現(xiàn)，可以先移步上文了解），然后監(jiān)聽手機(jī)方向傳感器，根據(jù)方向?qū)η熬昂捅尘斑M(jìn)行移動，造成視覺上的景深效果。

有趣的是，如果你使用的是iPhone手機(jī)，相信你應(yīng)該能發(fā)現(xiàn)在首頁狀態(tài)下，隨著手機(jī)不同方向的轉(zhuǎn)動，背景圖會跟著反方向輕微移動，也能給人一種類似的景深效果。

實戰(zhàn)

翻閱小程序文檔，我們需要用到兩個API：wx.startDeviceMotionListening 和 wx.onDeviceMotionChange。 這里我們需要重點關(guān)注的是wx.onDeviceMotionChange這個API返回的內(nèi)容，根據(jù)文檔，該API返回如下三個值：

如果你是第一次接觸這個API，相信你看了文檔也是一頭霧水，接下來我將用chrome瀏覽器調(diào)試工具幫你徹底理解這三個值分別是什么意思。

借助chrome開發(fā)者工具理解API返回值

打開瀏覽器開發(fā)者工具，打開傳感器進(jìn)行調(diào)試

顯示的三個值剛好與該API返回值對應(yīng)?？梢钥吹皆赼lpha=0,beta=90,gamma=0的情況下，代表手機(jī)是垂直立在平面，我門可以點擊選項或者直接在輸入框中修改值，就可以直觀的看到隨著值的變化。

有了上面實時模擬的工具：

• alpha：表示設(shè)備沿 Z 軸旋轉(zhuǎn)的角度，范圍為 0~360；

• beta：表示設(shè)備在x軸上的旋轉(zhuǎn)角度，范圍為-180~180。它描述的是設(shè)備由前向后旋轉(zhuǎn)的情況；

• gamma：表示設(shè)備在y軸上的旋轉(zhuǎn)角度，范圍為-90~90。它描述的是設(shè)備由左向右旋轉(zhuǎn)的情況。

代碼

wxml:

  
  
    
      
        
          
          
          新年快樂
          大吉大利
        
      
    
  

這里注意的是，由于swiper只能嵌套swiper-item組件，所以需要將背景圖放置于swiper同級，并用定位的方式顯示

js:

// index.js
// 獲取應(yīng)用實例
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, // 動畫是否執(zhí)行完成
    animationStart: false, // 是否開始執(zhí)行動畫
    current: 0,
  },
  // 動畫開始執(zhí)行
  handleTransition(e) {
    if (this.data.animationFinish) {
      this.setData({
        animationFinish: false,
        animationStart: true,
      })
    }
  },
  // 動畫執(zhí)行結(jié)束
  handleFinish() {
    this.setData({
      animationFinish: true,
      animationStart: false,
    })
  },
  // current值變化
  handleChange(e) {
    this.setData({
      current: e.detail.current,
    })
  },
  onLoad() {

    const that = this;
    // 監(jiān)聽方向變化
    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

正常我們使用手機(jī)是屏幕朝上，所以取相對值一半即可。 根據(jù)計算得到的偏移x,y后，頁面通過transform: translate3d()改變元素偏移距離。

最終實現(xiàn)效果

這里看起來效果不是特別明顯，原因有兩個：

• 素材圖是我網(wǎng)上找到拼湊而成，總體合成效果并不美觀，想達(dá)到較逼真的效果需要設(shè)計配合出素材圖；

• 在偏移至最大值時，未做緩沖動畫，不合符直覺（這里后面有時間再研究實現(xiàn)）；

額外的動畫效果

其實借助該方向API，我們還可以作為觸發(fā)動畫的觸發(fā)器。例如在手機(jī)翻轉(zhuǎn)到一定角度值時，我們可以播放煙花效果

安裝lottie-miniprogram包

npm i lottie-miniprogram

安裝完之后記得在微信開發(fā)者工具中點擊構(gòu)建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中調(diào)用

lottieInstance.play()

處理觸發(fā)即可

感謝大家的閱讀，以上就是“在小程序中如何實現(xiàn)3d裸眼輪播效果”的全部內(nèi)容了，學(xué)會的朋友趕緊操作起來吧。相信創(chuàng)新互聯(lián)小編一定會給大家?guī)砀鼉?yōu)質(zhì)的文章。謝謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！