自如客APP裸眼3D效果的实现
背景
移动端界面设计如此火热的今天，各类大厂的设计规范和设计语言已经非常的成熟，我们想做一些在这套成熟的设计规范之外的尝试和创新，所以有别于传统的banner交互形式成为了我们的发力点。
设计理念
由于app版面空间有限，除了功能导向、阅读习惯和设计美观外，自如想在既定的框下，做一下不同的设计尝试，哪怕这种尝试只能提升用户1%的观感。可能租了几年自如的房子，用了几年自如客app，你可能也不会注意到一些小的细节。但如果哪天，作为用户的你突然发现了这个隐藏的“彩蛋”，看到了自如在这些小细节上的用心，我相信那天你将会对自如这个品牌有更深层次的认识和理解。
裸眼3D技术一般都是应用在裸眼3D大屏、全息投影等等比较常见的场景中，在APP的banner上应用，的确也是一次全新的尝试。我们通过借助移动设备上的传感器、以及自身的屏显清晰度、画面呈现，将2D影像转化为景深效果，以呈现出不用"3D"眼镜就可看到的3D效果。
实现方式
以下以Android为例，介绍一下该效果的实现方式。
分层
自如客app的banner其实一直在创新当中，有专门注意过的同学可能知道，在裸眼3D效果之前，自如客app其实就已经实现了分层，当时为了实现更加自然和精致的切换效果：在每个banner滑入滑出的时候，底部其实会在原地进行渐显渐隐，内容会跟随手势滑入滑出。此次为了实现3D效果，我们在以前分层的基础上加了一层中景，将原有的前景拆分为前景和中景。
上图的sl_bg为背景，pv_middle为中景，sl为前景
由于切换的交互，实际上banner使用了两个viewpager进行了联动。背景在最底层的viewpager里面，中景和前景在另外一个viewpager里。
跟手位移
打开自如客app后，用户操作设备可以明显感受到画面的错位移动，造成视觉上的景深效果。这种错位移动其实就是借助设备本身的传感器来实现的，具体实现方式是我们让中景始终保持不动，同时从设备传感器获取当前设备对应的倾斜角，根据倾斜角计算出背景和前景的移动距离，然后执行背景和前景移动的动作。如下图所示：
为了使用的方便，我们封装了一个SensorLayout，专门用于根据设备的倾斜角执行内容的位移； SensorLayout内部的主要实现：
注册对应的传感器
```java mSensorManager = (SensorManager) getContext().getSystemService(Context.SENSOR_SERVICE); // 重力传感器 mAcceleSensor = mSensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER); // 地磁场传感器 mMagneticSensor = mSensorManager.getDefaultSensor(Sensor.TYPE_MAGNETIC_FIELD);
mSensorManager.registerListener(this, mAcceleSensor, SensorManager.SENSOR_DELAY_GAME); mSensorManager.registerListener(this, mMagneticSensor, SensorManager.SENSOR_DELAY_GAME); ```
计算偏转角度
```java 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); // x轴的偏转角度 values[1] = (float) Math.toDegrees(values[1]); // y轴的偏转角度 values[2] = (float) Math.toDegrees(values[2]);
``` 通过重力传感器和地磁场传感器，获取设备的偏转角度
根据偏转角度执行滑动
java
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());
mDegreeX即为第二部中获取的偏转角度，mDegreeXMin和mDegreeXMax为X轴可发生偏转位移的角度最大值和最小值，mYMoveDistance即为Y轴上的最大偏移距离（围绕X轴发生旋转，视图会沿Y轴上发生位移）；Y轴上的偏转同理；就算好X轴和Y轴的偏移距离后，使用scroller进行滑动；
实现总结
读到这里，相信大家已经基本了解了这套banner的实现方案。Android端在布局上进行了分层，中景位置不变，借助重力传感器和地磁场传感器获取偏转角度，根据角度使背景和前景进行错位移动。iOS端的实现原理也基本一致，不再赘述。
本文作者：自如大前端研发中心-黄进
招聘信息
自如大前端研发中心招募新同学！
FE/IOS/Android工程师看过来
公司福利有： - 全额五险一金，并额外购买商业保险 - 免费健身房+年度体检 - 公司附近租房9折优惠 - 每年2次晋升机会 办公地点：北京酒仙桥普天实业科技园 欢迎对技术有执着热爱的你加入我们！简历请投递 [email protected]！