PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

preface

In many functional modules of an APP, the home page rotation chart plays an important role as the entrance to distribute key information. I remember reading an article a few months ago — “The realization of naked 3D Effect in The APP of Freke”. The article mentioned that the following naked 3D banner rotation effect picture was realized in the Android APP end:

Inspired by this article, I decided to “follow the gourd” and tried to simulate a 3d naked eye effect rotation map full of Spring Festival atmosphere in the small program.

The principle of

Look carefully implement the dynamic rendering, we can see that the banner figure is not a regular picture, but the picture content hierarchical way overlap (above mentioned articles have mentioned, it is used the background layer, foreground and middle appearing after the superposition of three, can first move to understand, above), and then listening phone direction sensor, The foreground and background are moved according to direction to create a visual depth of field effect.

Interestingly, if you have an iPhone, you’ll notice that on the home page, the background moves slightly in the opposite direction as the phone moves in different directions, giving a similar depth of field effect. (The effect is shown below)

In actual combat

Now that we’ve introduced the principles, let’s get started.

Through small program document, we need to use two API: wx. StartDeviceMotionListening and wx onDeviceMotionChange. What we need to focus on here is what the Wx. onDeviceMotionChange API returns. According to the documentation, this API returns the following three values:

If you’re new to the API, you’re probably confused by the documentation, so I’ll use the Chrome debugger to help you understand what these three values mean.

Use chrome Developer Tools to understand the API return values

Open the browser developer tool and follow these steps to enable sensor debugging:

Once opened, look here:

Yi? Isn’t that the same thing? Yes, the three values shown here correspond exactly to the values returned by the API. It can be seen that when alpha=0, Beta =90,gamma=0, it means that the mobile phone is vertically standing on the plane. We can click options or directly modify the value in the input box, and we can intuitively see the change of the mobile phone’s flipping state with the change of the value. For example, when the mobile phone is flat on the desktop, the values of the three parameters are as follows:

With the real-time simulation tool above, the following diagram is easy to understand:

  • Alpha: indicates the rotation Angle of the device along the Z-axis, ranging from 0 to 360.
  • Beta: indicates the rotation Angle of the device on the X axis. The value ranges from -180 to 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 to 90. It describes the rotation of the device from left to right.

code

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}}" > happy New Year < / text > < text class = "text" wx: else > prosperous < / text > < / view > </swiper-item> </block> </swiper> </view>Copy the code

Note that since swiper can only nest swiper-Item components, you need to place the background image at the level of swiper and display it 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, // animationStart: false, // animationStart: false 0} / / animation began to perform handleTransition (e) {if (this. Data. AnimationFinish) {enclosing setData ({animationFinish: HandleFinish () {this.setData({animationFinish: true, animationStart: HandleChange (e) {this.setData({current: e.detail.current, }) }, onLoad() { const that = this; / / to monitor direction 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 }) }) } }) } })Copy the code

The code to be explained here is

const disY = beta / 90 * 12
Copy the code

Normally we use mobile phones with the screen facing up, so take half of the relative value. According to the calculated offset x,y, the page changes the element offset distance by transform: translate3D ().

Final effect

It doesn’t look particularly effective here for two reasons:

  • The material map is made up of what I found on the Internet. The overall synthetic effect is not beautiful. In order to achieve a more realistic effect, it is necessary to design and match the material map.
  • In the offset to the maximum value, no buffering animation, not intuitive (here later have time to study implementation);

Extra animation effects

In fact, with the direction API, we can also act as a trigger to trigger the animation. For example, we can play fireworks when the phone is flipped to a certain Angle

Lottie – miniprogram installation package

npm i lottie-miniprogram
Copy the code

After installation, please click build NPM package in wechat Developer tools

wxml:

<canvas id="canvas" type="2d" style="position: absolute; top: 0; left: 0; width: 300px; height: 200px; z-index: 99;" ></canvas>Copy the code

js:

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() }Copy the code

It is then called in wx.onDevicemotionChange

lottieInstance.play()
Copy the code

Handle trigger

The complete codeClick here to

The resources

  • The realization of the naked eye 3D effect of The Free Guest APP
  • JavaScript gyroscope detects device orientation
  • Photo material website