How to achieve 3D naked eye effect in mini program carousel? The following article will introduce to you the implementation method to add color to the Spring Festival atmosphere. I hope it will be helpful to everyone!

Among the many functional modules of an APP, the home page carousel plays an important role. It is the entrance to distribute key information. I remembered an article I read a few months ago - " Implementation of naked-eye 3D effect in Ziruke APP". The article mentioned that the following naked-eye 3D banner carousel effect was implemented on the Android app:

Inspired by this article, I decided to "follow the example" and try to simulate a 3D naked-eye effect carousel full of Spring Festival atmosphere on the mini program.

Principle

Carefully observe the dynamic renderings implemented above. It can be seen that the banner picture is not a conventional picture, but uses a picture to divide the content. It is displayed in a layer-by-layer manner (as mentioned in the article mentioned above, the background layer, foreground and middle ground are superimposed and presented. You can go to the above to understand first), and then monitor the direction sensor of the mobile phone and adjust the display according to the direction. The foreground and background move, creating a visual depth of field effect.

What’s interesting is that if you are using an iPhone, I believe you should be able to find that in the homepage state, as the phone rotates in different directions, the background image will move slightly in the opposite direction, which can also give people a sense of A similar depth of field effect. (The effect is as shown below)

Practical combat

After introducing the principle, let’s start the actual combat.

Looking through the mini program documentation, we need to use two APIs: wx.startDeviceMotionListening and wx.onDeviceMotionChange. What we need to focus on here is the content returned by the wx.onDeviceMotionChange API. According to the documentation, the API returns the following three values:

If you are exposed to this for the first time API, I believe you are confused after reading the documentation. Next, I will use the Chrome browser debugging tool to help you fully understand what these three values ??mean.

Use chrome developer tools to understand API return values

Open the browser developer tools and follow the steps below to turn on sensor debugging:

After opening it, look here:

Eh? Isn't this the same thing? Yes, the three values ??shown here exactly correspond to the API return value. It can be seen that in the case of alpha=0, beta=90, gamma=0, it means that the phone is standing vertically on a plane. We can click on the option or directly modify the value in the input box, and we can intuitively see the corresponding value. changes, the flip state of the mobile phone changes, for example, when the mobile phone is placed flat on the table, the three parameter values ????are as follows:

With the above real-time simulation tools, the next picture will be Easy to understand:

• alpha: Indicates the angle of rotation of the device along the Z axis, ranging from 0 to 360;
• beta: Indicates that the device is in The rotation angle on the x-axis, ranging from -180~180. It describes the rotation of the device from front to back;
• gamma: indicates the rotation angle of the device on the y-axis, ranging from -90~90. It describes the situation when the device is rotated from left to right.

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>

Note here that since swiper can only nest the swiper-item component, you need to The background image is placed at the same level as the swiper and displayed in a positioning manner

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
          })
        })
      }
    })
  }
})

The code to be explained here is

const disY = beta / 90 * 12

Normally when we use the mobile phone, the screen is facing up , so just take half the relative value. After calculating the offset x, y, the page changes the offset distance of the element through transform: translate3d().

Final effect

The effect here seems not to be particularly obvious, for two reasons:

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

額外的動畫效果

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

安裝lottie-miniprogram包

npm i lottie-miniprogram

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

wxml:

<canvas id="canvas" type="2d"   style="max-width:90%"></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()

處理觸發(fā)即可

完整代碼

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

本文轉載自：https://juejin.cn/post/7051490823497580574

作者：碼克吐溫

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

The above is the detailed content of Walk you step by step on how to achieve the 3D naked-eye carousel effect in the mini program. For more information, please follow other related articles on the PHP Chinese website!