background

Nowadays, mobile terminal interface design is so hot, and the design specifications and design languages of various big factories have become very mature. We want to try and innovate beyond this set of mature design specifications, so the interactive form of banner, which is different from the traditional one, has become our focus.

Design concept

Due to the limited space of the app layout, in addition to functional orientation, reading habits and beautiful design, I feel free to make different design attempts under the established box, even if this attempt can only improve the user’s look and feel by 1%. You may have been renting a free house and using the free App for years, and you may not have noticed the small details. However, if one day, as a user, you suddenly find this hidden “Easter egg” and see the attention paid to these small details, I believe that you will have a deeper understanding of the brand.

Glasses-free 3D technology is generally applied in common scenes such as glasses-free 3D large screen, holographic projection and so on. It is indeed a new attempt to apply it on the banner of an APP. By using sensors on mobile devices and the sharpness and presentation of our own screens, we transform 2D images into a depth of field effect to create a 3D effect that can be seen without “3D” glasses.

implementation

Take Android as an example to introduce the implementation of this effect.

layered

In fact, the banner of Freelancer app is always in the process of innovation. Those of you who have paid special attention to it may know that before the naked eye 3D effect, freelancer app has actually achieved layering. At that time, in order to achieve a more natural and delicate switching effect: As each banner slides in and out, the bottom actually fades in and out in place, and the content slides in and out following the gesture. In order to achieve the 3D effect, we added a layer of middle shot on the basis of the previous layers, and split the original foreground into foreground and middle shot.

The image above shows SL_BG in the background, pv_middle in the middle and SL in the foreground

Because of the interaction of the switch, the banner actually uses two ViewPagers for linkage. The background is in the bottom viewpager and the middle and foreground are in the other viewpager.

Also the displacement

After opening the App, users can obviously feel the dislocation movement of the picture when operating the device, resulting in a visual depth of field effect. In fact, this dislocation movement is realized by the sensor of the device itself. The specific way to achieve this is that we keep the middle scene still, and at the same time obtain the corresponding tilt Angle of the current device from the device sensor. According to the tilt Angle, the moving distance of the background and foreground is calculated, and then the background and foreground movement is performed. As shown in the figure below:

For ease of use, we encapsulate a SensorLayout designed to perform content displacement based on the tilt Angle of the device; The main implementation inside SensorLayout:

The corresponding sensor is registered

mSensorManager = (SensorManager) getContext().getSystemService(Context.SENSOR_SERVICE);
// Gravity sensor
mAcceleSensor = mSensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
// Geomagnetic field sensor
mMagneticSensor = mSensorManager.getDefaultSensor(Sensor.TYPE_MAGNETIC_FIELD);

mSensorManager.registerListener(this, mAcceleSensor, SensorManager.SENSOR_DELAY_GAME);
mSensorManager.registerListener(this, mMagneticSensor, SensorManager.SENSOR_DELAY_GAME);
Copy the code

Calculate the deflection Angle

if (event.sensor.getType() == Sensor.TYPE_ACCELEROMETER) {
    mAcceleValues = event.values;
}
if (event.sensor.getType() == Sensor.TYPE_MAGNETIC_FIELD) {
    mMageneticValues = event.values;
}

float[] values = new float[3];
float[] R = new float[9];
SensorManager.getRotationMatrix(R, null, mAcceleValues, mMageneticValues);
SensorManager.getOrientation(R, values);
// The deflection Angle of the x axis
values[1] = (float) Math.toDegrees(values[1]);
// The deflection Angle of the y axis
values[2] = (float) Math.toDegrees(values[2]);

Copy the code

The deflection Angle of the device is obtained by gravity sensor and geomagnetic field sensor

Perform sliding according to deflection Angle

if (mDegreeY <= 0 && mDegreeY > mDegreeYMin) {
    hasChangeX = true;
    scrollX = (int) (mDegreeY / Math.abs(mDegreeYMin) * mXMoveDistance*mDirection);
} else if (mDegreeY > 0 && mDegreeY < mDegreeYMax) {
    hasChangeX = true;
    scrollX = (int) (mDegreeY / Math.abs(mDegreeYMax) * mXMoveDistance*mDirection);
}
if (mDegreeX <= 0 && mDegreeX > mDegreeXMin) {
    hasChangeY = true;
    scrollY = (int) (mDegreeX / Math.abs(mDegreeXMin) * mYMoveDistance*mDirection);
} else if (mDegreeX > 0 && mDegreeX < mDegreeXMax) {
    hasChangeY = true;
    scrollY = (int) (mDegreeX / Math.abs(mDegreeXMax) * mYMoveDistance*mDirection);
}
smoothScrollTo(hasChangeX ? scrollX : mScroller.getFinalX(), hasChangeY ? scrollY : mScroller.getFinalY());
Copy the code

MDegreeX is the deflection Angle obtained in Part 2, mDegreeXMin and mDegreeXMax are the maximum and minimum deflection Angle on the X-axis, and myDegreDistance is the maximum deflection distance on the Y-axis (rotation around the X-axis causes the view to shift along the Y-axis). Same thing for deflection on the Y axis; After the offset distance between the X-axis and Y-axis is taken into account, scroller is used for sliding;

Implementation summary

After reading this, I believe that you have basically understood the implementation scheme of this banner. The layout of Android terminal is layered. The mid-shot position is unchanged, and the deflection Angle is obtained with the help of gravity sensor and geomagnetic field sensor, and the background and foreground are moved in dislocation according to the Angle. The implementation principle of iOS is basically the same, so I will not repeat it.

Author: Huang Jin, Research and development Center

Recruitment information

New students are wanted in the research and development Center!

FE/IOS/Android engineer check this out

Company benefits:

  • Full five insurance and one housing fund, and additional purchase of commercial insurance
  • Free gym + annual physical
  • 10% discount on rent near the company
  • 2 promotion opportunities per year

Office: Beijing Jiuxianqiao Putian Industrial science and Technology Park welcome to have a persistent love of technology you join us! Please send your resume to [email protected]!