?? ???? ????? 3D ?? ??? ?? ??? ?????? ?? ???? ? ?? ???? ?? ??? ?? ??? ???????. ?? ??? ??? ?? ????!

APP? ?? ?? ?? ??? ? ??? ???? ?? ??? ???? ?? ??? ???. ? ? ?? ?? ??? ??????. "Ziruke APP?? ?? 3D ?? ??"??? ????? ??? ?? ?? 3D ?? ??? ??? Android ?? ?????? ??????.

? ???? ??? ?? "?? ????" ?? ?????? ? ?? ???? ??? 3D ?? ?? ????? ?????? ??? ????.

Principle

?? ??? ?? ???? ?? ?? ???? ?? ???? ?? ???? ??? ??? ??? ????? ??? ??? ? ? ????(??? ??? ???? ????? ??? ???? ???? ??? ??? ??? ??? ?(?? ????? ??? ?????) ???? ?? ??? ?????? ??? ?? ??? ??? ???? ??? ?? ??.

????? iPhone? ???? ?? ???? ???? ?? ? ??? ??? ?????. ???? ?? ???? ???? ?? ???? ?? ?? ???? ??? ????? ??? ?? ??. (??? ??? ????)

?? ??

??? ??? ?, ?? ??? ???????.

?? ???? ??? ???? wx.startDeviceMotionListening ? wx.onDeviceMotionChange?? ? ?? API? ???? ???. ??? ???? ? ?? wx.onDeviceMotionChange API? ???? ??????. ??? ??? API? ?? ? ?? ?? ?????.

? API? ?? ???? ??, ??? ?? ??? ??? ????????? ?????. ???? Chrome ???? ??? ??? ???? ? ? ?? ?? ???? ?? ???? ????? ????????.

Chrome ??? ??? ???? API ?? ? ?? ??

???? ??? ??? ?? ?? ??? ?? ?? ???? ???.

? ? ??? ???.

咦? ??? ??? ? ????? ?, ??? ??? ? ?? ?? API ?? ?? ??? ?????. alpha=0, beta=90, gamma=0? ?? ???? ??? ???? ??? ??? ?? ? ? ???, ??? ????? ????? ?? ?? ??? ? ????. ?? ?? ????, ???? ??? ??? ???? ?? ????? ??? ? ????. ?? ?? ???? ??? ?? ???? ??? ? ?? ?? ?? ?? ??? ????.

?? ?? -?? ????? ??? ?? ??? ???? ????.

• ??: 0?? 360??? Z?? ?? ??? ?? ??? ?????.
• beta: ?? ??? ?????. x?? ?? ??? -180?? 180 ?????. ??? ?? ??? ??? ?????.
• gamma: -90~90 ??? y??? ??? ?? ??? ?????. ??? ???? ????? ???? ??? ?????.

Code

wxml:

<view class="swiper-box">
  <image  wx:for="{{background}}" class="swiper-bg {{animationStart || current === index ? &#39;fadeIn&#39; : &#39;fadeOut&#39;}} "></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
// 獲取應(yīng)用實(shí)例
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, // 動(dòng)畫是否執(zhí)行完成
    animationStart: false, // 是否開始執(zhí)行動(dòng)畫
    current: 0,
  },
  // 動(dòng)畫開始執(zhí)行
  handleTransition(e) {
    if (this.data.animationFinish) {
      this.setData({
        animationFinish: false,
        animationStart: true,
      })
    }
  },
  // 動(dòng)畫執(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

?? ??? ???? ??? ? ??? ?? ??? ??? ???? ??? ????? ???. ??? x, y? ??? ? ???? transform: translate3d()? ?? ??? ??? ??? ?????.

?? ??

??? ??? ??? ???? ?? ? ????. ? ?? ??? ????.

• 素材圖是我網(wǎng)上找到拼湊而成，總體合成效果并不美觀，想達(dá)到較逼真的效果需要設(shè)計(jì)配合出素材圖；
• 在偏移至最大值時(shí)，未做緩沖動(dòng)畫，不合符直覺（這里后面有時(shí)間再研究實(shí)現(xiàn)）；

額外的動(dòng)畫效果

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

安裝lottie-miniprogram包

npm i lottie-miniprogram

安裝完之后記得在微信開發(fā)者工具中點(diǎn)擊構(gòu)建npm包

wxml:

<canvas id="canvas" type="2d"   style="max-width:90%"></canvas>

js:

  onLoad() {
    // 初始化lottie動(dòng)畫
    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ā)即可

完整代碼

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

本文轉(zhuǎn)載自：https://juejin.cn/post/7051490823497580574

作者：碼克吐溫

【相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

? ??? ?? ?????? 3D ?? ?? ?? ??? ?? ??? ???? ??? ????.? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!