ミニ プログラム カルーセルで 3D 裸眼効果を?qū)g現(xiàn)するにはどうすればよいですか?次の記事では春節(jié)の雰囲気を彩る実裝方法をご紹介しますので、ぜひ皆さんの參考になれば幸いです！

APP の數(shù)多くの機能モジュールの中でも、トップページのカルーセルは重要な役割を果たしており、重要な情報を配信する入り口となります。數(shù)か月前に読んだ記事「 Ziruke APP での裸眼 3D 効果の実裝 」を思い出しました。その記事では、次の裸眼 3D バナー カルーセル効果が Android アプリに実裝されたと述べられていました。

この記事に觸発されて、「例に倣って」、春節(jié)の雰囲気に満ちた 3D 裸眼効果カルーセルを mini でシミュレートしてみることにしました。プログラム。

原則

上記で実裝された動的レンダリングを注意深く観察すると、バナー畫像が従來の畫像ではなく、コンテンツを分割するために畫像を使用していることがわかります。レイヤーごとに表示し（上記の記事にもありますが、背景レイヤー、前景、中景を重ねて表示します。まずは上記を參照してください）、方向センサーを監(jiān)視します。攜帯電話の方向に合わせてディスプレイを調(diào)整すると、前景と背景が動き、視覚的な被寫界深度効果が生まれます。

興味深いのは、iPhone を使用している場合は、ホームページの狀態(tài)で、攜帯電話がさまざまな方向に回転すると、背景畫像がわずかに反対方向に移動することがわかると思います。これは、人々に同様の被寫界深度効果の感覚を與えることもできます。 （効果は以下の通り）

実戦

原理を紹介した後、実戦を始めてみましょう。

ミニ プログラムのドキュメントを確認すると、wx.startDeviceMotionListening と wx.onDeviceMotionChange という 2 つの API を使用する必要があります。 ここで注目する必要があるのは、wx.onDeviceMotionChange API によって返されるコンテンツです。ドキュメントによると、API は次の 3 つの値を返します。初めてこの API を使用する場合、ドキュメントを読んで混亂していると思いますが、次に、Chrome ブラウザのデバッグ ツールを使用して、これら 3 つの値の意味を完全に理解できるようにします。

#Chrome 開発者ツールを使用して API の戻り値を理解する

ブラウザ開発者ツールを開き、以下の手順に従ってセンサーのデバッグを有効にします:

開いたらここを見てください:

え？これも同じ事ではないでしょうか？はい、ここに示されている 3 つの値は API の戻り値に正確に対応しています。 alpha=0、beta=90、gamma=0 の場合、電話機が平面上に垂直に立っていることがわかります。オプションをクリックするか、入力ボックスの値を直接変更できます。対応する値が変化すると、攜帯電話のフリップ狀態(tài)が変化することが直感的にわかります。たとえば、攜帯電話がテーブルの上に平らに置かれたとき、3 つのパラメーター値は次のとおりです。

# 上記のリアルタイム シミュレーション ツールを使用すると、次の図がわかりやすくなります。

アルファ: を示します。 Z 軸に沿ったデバイスの回転角度 (0 ～ 360 の範囲);

beta: デバイスが X 軸上の回転角度 (-180 ～ 180 の範囲) にあることを示します。前から後ろへのデバイスの回転を記述します。

ガンマ: y 軸上のデバイスの回転角度を示します (-90 ～ 90 の範囲)。デバイスを左から右に回転させたときの狀況を説明します。

• コード
• 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>

ここで、スワイパーはスワイパー項目コンポーネントのみをネストできるため、背景をネストする必要があることに注意してください。畫像はスワイパーと同じレベルに配置され、位置決めして表示されます

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, // 動畫是否執(zhí)行完成
    animationStart: false, // 是否開始執(zhí)行動畫
    current: 0,
  },
  // 動畫開始執(zhí)行
  handleTransition(e) {
    if (this.data.animationFinish) {
      this.setData({
        animationFinish: false,
        animationStart: true,
      })
    }
  },
  // 動畫執(zhí)行結束
  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: translation3d()

を通じて要素のオフセット距離を変更します。

最終的な効果

ここでの効果は、次の 2 つの理由により、特に明らかではないようです。<ul><li>素材圖是我網(wǎng)上找到拼湊而成，總體合成效果并不美觀，想達到較逼真的效果需要設計配合出素材圖；</li><li>在偏移至最大值時，未做緩沖動畫，不合符直覺（這里后面有時間再研究實現(xiàn)）；</li></ul><h2 id="額外的動畫效果">額外的動畫效果</h2><p>其實借助該方向API，我們還可以作為觸發(fā)動畫的觸發(fā)器。例如在手機翻轉(zhuǎn)到一定角度值時，我們可以播放煙花效果</p><h3 id="安裝lottie-miniprogram包">安裝lottie-miniprogram包</h3><pre class="brush:php;toolbar:false">npm i lottie-miniprogram</pre><p>安裝完之后記得在微信開發(fā)者工具中點擊構建npm包</p><p>wxml:</p><pre class='brush:php;toolbar:false;'>&lt;canvas id=&quot;canvas&quot; type=&quot;2d&quot; style=&quot;position: absolute;top: 0;left: 0;width: 300px; height: 200px;z-index: 99;&quot;&gt;&lt;/canvas&gt;</pre><p>js:</p><pre class='brush:php;toolbar:false;'> onLoad() { // 初始化lottie動畫 wx.createSelectorQuery().select(&amp;#39;#canvas&amp;#39;).node(res =&gt; { const canvas = res.node const context = canvas.getContext(&amp;#39;2d&amp;#39;) lottie.setup(canvas) lottieInstance = lottie.loadAnimation({ path: &amp;#39;https://assets10.lottiefiles.com/packages/lf20_1qfekvox.json&amp;#39;, autoplay: true, loop: false, rendererSettings:{ context } }) }).exec() }</pre><p>然后在<code>wx.onDeviceMotionChange中調(diào)用

lottieInstance.play()

處理觸發(fā)即可

完整代碼

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

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

作者：碼克吐溫

【相關學習推薦：小程序開發(fā)教程】

以上がミニ プログラムで 3D 裸眼カルーセル効果を?qū)g現(xiàn)する方法を段階的に説明します。の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。