Android仿自如客APP裸眼3D效果

时间  2021-08-12
标签 前端 android git github segmentfault app ide 布局 post this 栏目 Android 繁體版
原文   原文链接

前两天，偶然看到自如大前端开源了一个裸眼3D的Banner轮播图实现方案，以为很是有意思，因而也打算研究一下。前端

在这里插入图片描述

1，实现原理

实现原理来自自如客APP裸眼3D效果的实现android

1.1 分层

打开Android Stusio进行布局分析时会发现，他们的Banner使用了两层视图，对应两个Viewpager，而且这两个Viewpager还实现了联动，以下图所示。
在这里插入图片描述
除了Viewpager的联动，他们的Banner还支持裸眼3D效果，可以跟随陀螺进行显示上的变化。git

1.2 位移

打开自如客App，当用户在不一样的角度上看Banner时会看到明显的错位移动。这种错位移动其实借助的是设备自己的传感器来实现的，具体实现方式是让底部的背景始终保持不动，而后根据从设备传感器获取当前设备对应的倾斜角，计算出背景和前景的移动距离，进而执行背景和前景移动的动做，示意图以下。
在这里插入图片描述
相关的代码以下：github

1， 传感器代码

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

2，计算偏移角度代码

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]);

3，执行相对偏移计算

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());

2，Android实现

2.1 传感器监听

其实，实现裸眼3D效果最核心的就是传感器的监听，这个自如客SensorLayout已经进行了开源，SensorLayout经过监听传感器来计算View的位移，而后经过Scroller进行滑动，首选咱们添加一个传感器监听的方法，以下所示。segmentfault

public SensorLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    mScroller = new Scroller(context);
    mSensorManager = (SensorManager) getContext().getSystemService(Context.SENSOR_SERVICE);
    // 重力传感器
    if (mSensorManager != null) {
        Sensor accelerateSensor = mSensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
        // 地磁场传感器
        Sensor magneticSensor = mSensorManager.getDefaultSensor(Sensor.TYPE_MAGNETIC_FIELD);
        mSensorManager.registerListener(this, accelerateSensor, SensorManager.SENSOR_DELAY_GAME);
        mSensorManager.registerListener(this, magneticSensor, SensorManager.SENSOR_DELAY_GAME);
    }
}

而后，在传感器发生变化的时候经过Scroller来移动View，以下所示。app

@Override
public void onSensorChanged(SensorEvent event) {
    if (event.sensor.getType() == Sensor.TYPE_ACCELEROMETER) {
        mAccelerateValues = event.values;
    }
    if (event.sensor.getType() == Sensor.TYPE_MAGNETIC_FIELD) {
        mMagneticValues = event.values;
    }
    float[] values = new float[3];
    float[] R = new float[9];
    if (mMagneticValues != null && mAccelerateValues != null)
        SensorManager.getRotationMatrix(R, null, mAccelerateValues, mMagneticValues);
    SensorManager.getOrientation(R, values);
    // x轴的偏转角度
    values[1] = (float) Math.toDegrees(values[1]);
    // y轴的偏转角度
    values[2] = (float) Math.toDegrees(values[2]);
    double degreeX = values[1];
    double degreeY = values[2];
    if (degreeY <= 0 && degreeY > mDegreeYMin) {
        hasChangeX = true;
        scrollX = (int) (degreeY / Math.abs(mDegreeYMin) * mXMoveDistance * mDirection);
    } else if (degreeY > 0 && degreeY < mDegreeYMax) {
        hasChangeX = true;
        scrollX = (int) (degreeY / Math.abs(mDegreeYMax) * mXMoveDistance * mDirection);
    }
    if (degreeX <= 0 && degreeX > mDegreeXMin) {
        hasChangeY = true;
        scrollY = (int) (degreeX / Math.abs(mDegreeXMin) * mYMoveDistance * mDirection);
    } else if (degreeX > 0 && degreeX < mDegreeXMax) {
        hasChangeY = true;
        scrollY = (int) (degreeX / Math.abs(mDegreeXMax) * mYMoveDistance * mDirection);
    }
    smoothScroll(hasChangeX ? scrollX : mScroller.getFinalX(), hasChangeY ? scrollY : mScroller.getFinalY());
}

代码中的mDirection表示的是移动的方向，这个参数会开放给使用方，用来设置跟随传感器移动仍是与传感器反向移动。ide

public void smoothScroll(int destX, int destY) {
    int scrollY = getScrollY();
    int delta = destY - scrollY;
    mScroller.startScroll(destX, scrollY, 0, delta, 200);
    invalidate();
}

@Override
public void computeScroll() {
    if (mScroller.computeScrollOffset()) {
        scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
        postInvalidate();
    }
}

SensorLayout完整的代码以下：布局

public class SensorLayout extends FrameLayout implements SensorEventListener {
    private final SensorManager mSensorManager;
    private float[] mAccelerateValues;
    private float[] mMagneticValues;
    private final Scroller mScroller;
    private double mDegreeYMin = -50;
    private double mDegreeYMax = 50;
    private double mDegreeXMin = -50;
    private double mDegreeXMax = 50;
    private boolean hasChangeX;
    private int scrollX;
    private boolean hasChangeY;
    private int scrollY;
    private static final double mXMoveDistance = 40;
    private static final double mYMoveDistance = 20;
    private int mDirection = 1;

    public SensorLayout(@NonNull Context context) {
        this(context, null);
    }

    public SensorLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SensorLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mScroller = new Scroller(context);
        mSensorManager = (SensorManager) getContext().getSystemService(Context.SENSOR_SERVICE);
        // 重力传感器
        if (mSensorManager != null) {
            Sensor accelerateSensor = mSensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
            // 地磁场传感器
            Sensor magneticSensor = mSensorManager.getDefaultSensor(Sensor.TYPE_MAGNETIC_FIELD);
            mSensorManager.registerListener(this, accelerateSensor, SensorManager.SENSOR_DELAY_GAME);
            mSensorManager.registerListener(this, magneticSensor, SensorManager.SENSOR_DELAY_GAME);
        }
    }


    @Override
    public void onSensorChanged(SensorEvent event) {
        if (event.sensor.getType() == Sensor.TYPE_ACCELEROMETER) {
            mAccelerateValues = event.values;
        }
        if (event.sensor.getType() == Sensor.TYPE_MAGNETIC_FIELD) {
            mMagneticValues = event.values;
        }
        float[] values = new float[3];
        float[] R = new float[9];
        if (mMagneticValues != null && mAccelerateValues != null)
            SensorManager.getRotationMatrix(R, null, mAccelerateValues, mMagneticValues);
        SensorManager.getOrientation(R, values);
        // x轴的偏转角度
        values[1] = (float) Math.toDegrees(values[1]);
        // y轴的偏转角度
        values[2] = (float) Math.toDegrees(values[2]);
        double degreeX = values[1];
        double degreeY = values[2];
        if (degreeY <= 0 && degreeY > mDegreeYMin) {
            hasChangeX = true;
            scrollX = (int) (degreeY / Math.abs(mDegreeYMin) * mXMoveDistance * mDirection);
        } else if (degreeY > 0 && degreeY < mDegreeYMax) {
            hasChangeX = true;
            scrollX = (int) (degreeY / Math.abs(mDegreeYMax) * mXMoveDistance * mDirection);
        }
        if (degreeX <= 0 && degreeX > mDegreeXMin) {
            hasChangeY = true;
            scrollY = (int) (degreeX / Math.abs(mDegreeXMin) * mYMoveDistance * mDirection);
        } else if (degreeX > 0 && degreeX < mDegreeXMax) {
            hasChangeY = true;
            scrollY = (int) (degreeX / Math.abs(mDegreeXMax) * mYMoveDistance * mDirection);
        }
        smoothScroll(hasChangeX ? scrollX : mScroller.getFinalX(), hasChangeY ? scrollY : mScroller.getFinalY());
    }


    @Override
    public void onAccuracyChanged(Sensor sensor, int accuracy) {
    }

    public void smoothScroll(int destX, int destY) {
        int scrollY = getScrollY();
        int delta = destY - scrollY;
        mScroller.startScroll(destX, scrollY, 0, delta, 200);
        invalidate();
    }

    @Override
    public void computeScroll() {
        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            postInvalidate();
        }
    }

    public void unregister() {
        mSensorManager.unregisterListener(this);
    }

    public void setDegreeYMin(double degreeYMin) {
        mDegreeYMin = degreeYMin;
    }

    public void setDegreeYMax(double degreeYMax) {
        mDegreeYMax = degreeYMax;
    }

    public void setDegreeXMin(double degreeXMin) {
        mDegreeXMin = degreeXMin;
    }

    public void setDegreeXMax(double degreeXMax) {
        mDegreeXMax = degreeXMax;
    }

    public void setDirection(@ADirection int direction) {
        mDirection = direction;
    }

    @IntDef({DIRECTION_LEFT, DIRECTION_RIGHT})
    @Retention(RetentionPolicy.SOURCE)
    @Target(ElementType.PARAMETER)
    public @interface ADirection {

    }

    public static final int DIRECTION_LEFT = 1;
    public static final int DIRECTION_RIGHT = -1;
}

2.2 SensorLayout示例

其实，明白裸眼3D的原理后，咱们使用SensorLayout就能够很容易实现这种效果。下面是使用SensorLayout实现单个页面的裸眼3D效果，只须要使用SensorLayout包裹对应的图片便可。post

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.xzh.vrgame.banner3d.SensorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="25dp">

        <ImageView
            android:id="@+id/iv_background"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:scaleX="1.3"
            android:src="@drawable/background1"/>

    </com.xzh.vrgame.banner3d.SensorLayout>

    <ImageView
        android:id="@+id/iv_mid"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_gravity="bottom"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:scaleType="fitXY"
        android:src="@drawable/mid1"/>

    <com.xzh.vrgame.banner3d.SensorLayout
        android:id="@+id/sensor_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom">

        <ImageView
            android:id="@+id/iv_foreground"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:scaleType="fitXY"
            android:src="@drawable/foreground1"/>

    </com.xzh.vrgame.banner3d.SensorLayout>

</FrameLayout>

在这里插入图片描述

2.3 ViewPager裸眼3D轮播图示例

经过前面的分析，自如APP的裸眼3D用到了两个ViewPager，而后让他们实现联动。其实，咱们能够把背景层使用ImageView，而后前景层再使ViewPager也能够实现3D轮播的效果，经过监听前景层的ViewPager，来改变背景层使用ImageView。布局文件代码以下：this

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.xzh.vrgame.banner3d.SensorLayout
        android:id="@+id/sensor_layout"
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <ImageView
            android:id="@+id/iv_background"
            android:layout_width="match_parent"
            android:scaleType="centerCrop"
            android:scaleX="1.3"
            android:layout_height="match_parent" />

    </com.xzh.vrgame.banner3d.SensorLayout>

    <com.xzh.vrgame.widget.AutoPlayViewPager
        android:id="@+id/avp_foreground"
        android:layout_width="match_parent"
        android:layout_height="220dp" />

</FrameLayout>

而后就是使用ViewPager+PageAdapter实现轮播。固然，你们也可使用一些轮播的库减小代码，好比convenientbanner，最终效果以下图所示。
在这里插入图片描述

代码连接以下：https://github.com/xiangzhihong/AndroidDemo

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程